一、vue-cli脚手架简介
1、vue-cli是一个vue脚手架，可以快速构造项目结构。
2、vue-cli本身集成了多种项目模板：
- simple 很少简单
- webpack 包含ESLint代码规范检查、单元测试等
- webpack-simple 简化版的webpack，没有代码规范检查、单元测试
- browserify 使用的也相对较多
- browserify-simple 简化版的browserify，没有代码规范检查、单元测试
- pwa
二、vue-cli的使用
1、安装vue-cli
- 运行 cnpm install vue-cli -g 全局安装vue-cli
- 运行vue
- 运行vue --version 查看安装的vue-cli的版本
- 运行vue list 查看安装的vue-cli可用模板列表
2、初始化项目，生成项目模板
- vue init 模板名 项目名
使用webpack模板搭建项目
运行 vue init webpack vue-cli-demo2 （使用webpack模板，自定义项目名为vue-cli-demo2）
- 项目名称 enter
- 项目描述 enter
- 项目作者 enter
- 选择运行+编译/直接运行？运行+编译
- 选择是否需要vue-router？no
- 选择是否使用ESLint？是，选择标准的规则。
- 是否使用单元测试？no
- 是否启用e2e测试？no
- 是否使用npm安装模块包？yes （注意：在这里选择yes，则直接安装node_modules里面的模块包）
说明：ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等；要求比较严格。官网：http://eslint.org
完成后创建项目vue-cli-demo2成功！
进入vueStudy文件夹，可以看到成功创建了项目vue-cli-demo2，且自动生成了对应文件（比使用webpack-wimple模板多很多文件）
分别打开自动生成的6个文件。查看自动生成的代码：
1） index.html
2）package.json
3） webpack.config.js
4）App.vue
5) main.js
6) .babelrc
3、进入生成的项目目录，安装模块包
- cd vue-cli-demo2 进入生成的项目目录（vue-cli-demo是自定义的项目名称）
- cnpm install 安装模块包
注意：如果在创建项目的时候选择yes后，这里就不需要重新执行安装了。
安装完成后，生成node_modules文件夹，里面包所有安装包。
4、运行
- npm run dev //启动测试服务（此时看不到dist文件夹和build.js文件，只有在生产运行了npm run build后才可以看到）
自动打开浏览器，自动显示App.vue里面的内容。
- npm run bulid //将项目打包输出dist目录，项目上线将dist目录拷贝到服务器上