Vue.js 学习之路（一）

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的安装

关于 Vue.js 的安装，在官网上已经说的很清楚了，而且网上也有很多相关博客，我们没必要重复造这种低级的轮子。如果你还未安装 Vue.js 请移步的官网： Vue.js 安装

创建第一个 vue app

虽然官网不建议新手直接使用 vue-cli ，但是它的确方便。所以我们直接使用 vue-cli 来创建 vue 项目。

遇到了麻烦（I have a trouble）

简单的看了下网上的教程，就自以为是的使用了下面的命令来创建 vue 项目。可是没想到竟然出现了错误。

vue init my-first-app # 这么来初始化一个 vue 项目是有问题的

不信你来看：

heoclark@heoclark MINGW64 /f/workspace/vue/vue-test
$ vue init my-first-app

? Generate project in current directory? (Y/n)
? Generate project in current directory? Yes
   vue-cli · Failed to download repo vuejs-templates/my-first-app: Response code 404 (Not Found)


heoclark@heoclark MINGW64 /f/workspace/vue/vue-test
$

关于这个问题，我百度了一下 vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET ，其实关于这个问题我认为它们也没讨论出个所以然来，有人说需要使用 vue-init 而不是 vue init 。但我也尝试了一下，还是出现了同样的问题：


heoclark@heoclark MINGW64 /f/workspace/vue/vue-test
$ vue-init vue-test

? Generate project in current directory? (Y/n)
? Generate project in current directory? Yes
   vue-cli · Failed to download repo vuejs-templates/vue-test: Response code 404 (Not Found)


heoclark@heoclark MINGW64 /f/workspace/vue/vue-test
$

所以，这都不是问题的根本所在，而是因为你掉了一个参数，该参数指明了 vue 项目所要使用的模板。否则你就要使用另外的方式来创建（vue create your-project-name）。关于 vue-cli 的使用也可以去官网查看，因为 Vue.js 本来就是中国人开发的，所以官网本身就对中文有着很好的支持。

基于 webpack 构建快速模板

vue init webpack-simple my-first-app # vue init <template-model> <project-name>

webpack-simple 参数是可选的，可选并不代表可省略，而是说可以换成其它工具。

可选项还有以下几个官方参考地址：

webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

browserify-simple - A simple Browserify + vueify setup for quick prototyping.

pwa - PWA template for vue-cli based on the webpack template

simple - The simplest possible Vue setup in a single HTML file

当你按下面的顺序依次执行完后，程序就会自动弹出项目页面了：

heoclark@heoclark MINGW64 /f/workspace/vue
$ vue init webpack-simple my-first-app-2


? Project name my-first-app-2
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (ultravires <x555666777@qq.com>)
? Author ultravires <x555666777@qq.com>
? License (MIT)
? License MIT
? Use sass? (y/N) n
? Use sass? No

   vue-cli · Generated "my-first-app-2".

   To get started:

     cd my-first-app-2
     npm install
     npm run dev


heoclark@heoclark MINGW64 /f/workspace/vue
$ cd my-first-app-2

heoclark@heoclark MINGW64 /f/workspace/vue/my-first-app-2
$ npm install
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> uglifyjs-webpack-plugin@0.4.6 postinstall F:\workspace\vue\my-first-app-2\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 805 packages from 580 contributors and audited 8894 packages in 86.757s
found 0 vulnerabilities


heoclark@heoclark MINGW64 /f/workspace/vue/my-first-app-2
$ npm run dev

> my-first-app-2@1.0.0 dev F:\workspace\vue\my-first-app-2
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

运行效果图

npm run dev

官方vuejs-templates