命令操作
安装脚手架(全局安装)：npm install vue-cli -g
初始化项目(创建项目)：vue init webpack 项目名称(不能是中文)，或vue init webpack .
进入工程项目：cd 项目名称
安装项目依赖(最好不要用cnpm)：npm install
安装 vue 路由模块vue-router和网络请求模块vue-resource(根据需要安装)：cnpm install vue-router vue-resource --save
启动项目：npm run dev ==> npm run dev命令实际上运行的是node ./build dev-server.js
修改端口运行(默认端口8080)：PROT=6666 node ./build dev-server.js
填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)
这些坑是由于 npm 不是最新的版本3.10.2， 用 npm 3.9.5就会出现以下坑。解决办法: 请运行以下命令:npm update -g
报错==>
Error: Cannot find module 'opn'
Error: Cannot find module 'webpack-dev-middleware'
Error: Cannot find module 'express'
Error: Cannot find module 'compression'
Error: Cannot find module 'sockjs'
Error: Cannot find module 'spdy'
Error: Cannot find module 'http-proxy-middleware'
Error: Cannot find module 'serve-index'
若是是老版本的 vue-cli 还可能报其他错误，需要更新一下 vue-cli，执行命令：npm update vue-cli
之后可以查看一下当前全局 vue-cli 的版本，执行命令：npm view vue-cli
安装一下这个依赖到工程开发环境：
cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev
再启动项目，报错==>
ERROR in ./src/main.js
Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
@ multi main
ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080
安装一下 babel-runtime：cnpm install babel-helpers --save-dev
启动项目，再次报错==>
Module build failed: Error: Cannot find module 'babel-helpers'
Module build failed: Error: Cannot find module 'babel-traverse'
Module build failed: Error: Cannot find module 'json5'
Module build failed: Error: Cannot find module 'babel-generator'
Module build failed: Error: Cannot find module 'detect-indent'
Module build failed: Error: Cannot find module 'jsesc'
找不到依赖那就再安装一下：
cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不写了，请把全部把旧的环境全部清除，更新到最新版本
解决办法概述：
如果遇到Module build failed: Error: Cannot find module '模块名'
那就安装
cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)
比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
终于可以启动项目了
输入完命令会自动启动浏览器，如果默认打开 IE 不行 :npm run dev
脚手架目录结构说明
node_modules:整个项目以来的文件
build ：配置文件
webpack.base.conf.js中的alias定义了import Hello from '@/components/Hello'中的@，就是src
config:配置文件
src:源码目录，开发代码(我们写的代码放在该文件夹里，其他的一般不动)
src/assets:放一些第三方库和静态资源文件
src/components:存放开发好的组件(重要)
src/router:路由配置文件夹
src/app.vue:整个项目的根组件
src/main.js:项目的js入口文件==>
import Vue from 'vue'//导入vue模块
import App from './App'//导入app.vue文件
import router from './router'//导入router文件夹中的index.js
static:静态，放图片什么的
static/.babelrc:关于ES6的一些配置
static/.editorconfig:关于编辑器的一些配置
static/.gitignore:git版本管理控制工具忽略的文件(重要)
static/.postcssrc.js：浏览器前缀
index.html:项目入口
组件的使用：
1.使用import命令，将组件引入
2.在components中注册引入的组件
3.使用标签调用(标签使用驼峰写法)
注意点：
1.一个组件下只能有一个并列的 div
2.数据要写在 return 里面而不是像文档那样子写
错误的写法：
data: {
message: 'Hello Vue!
}
正确的写法：
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
vue脚手架路由：
欢迎界面：http://localhost:8080/#/
路由相关：
1.定义路由的跳转链接
2.路由激活后组件显示的位置 看文章
附加：动态参数
3.在Article组件中得到参数数据
this.$route.params.index
小结==>
12312这个数据会传给'/article/:index'中的index,
this.$route.params.index中的index是读取'/article/:index'中的index
history历史模式：http://localhost:8080/#/article应该是去掉#,添加mode: 'history'后，http://127.0.0.1:8080/article