vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。
1. 安装nodejs和淘宝镜像cnpm
下载安装nodejs，下载后双击按步骤安装即可。安装之后通过node命令
node -v来查看是否安装成功。
npm：nodejs已经集成了npm，node安装会默认装好npm。可通过npm -v命令来查看是否安装成功。
cnpm：因为node的npm安装插件比较慢，国内建议使用淘宝镜像cnpm工具。即先使用npm安装cnpm工具：npm i -g cnpm --registry=https://registry.npm.taobao.org，然后使用cnpm来安装其他插件。可通过cnpm -v命令来查看是否安装成功。
备注：建议不要用 cnpm 安装，会有各种诡异的bug，可通过重新指定 registry 来解决 npm 安装速度慢的问题
npm install --registry=https://registry.npm.taobao.org
注意：使用Vue脚手架创建Vue项目时，node版本至少是node6，否则创建项目时会报错。
2. 安装脚手架工具vue-cli
cnpm install -g vue-cli
3. 创建Vue项目并启动
(1) 创建一个基于 webpack 模板的项目
- 通过cd命令进入你想放置项目的文件夹，在命令窗口执行命令
vue init webpack来创建vue项目，之后输入相关信息（如：项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，根据需要自行考虑yes还是no）即可完成创建
创建项目并输入相关信息.png -
创建成功后，项目文件目录如下所示
项目文件目录.png
vue-test
├── build/ # 脚本目录：webpack 编译任务配置文件:(开发环境与生产环境)
│ └── ...
├── config/ # 配置目录
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ # 依赖的node工具包目录：项目中安装的依赖模块
├── src/ # 源码文件目录：自己的项目文件都需要放到 src 文件夹下
│ ├── main.js # 程序入口JS文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件目录
│ │ └── ...
│ └── assets/ # 资源文件目录：一般放一些静态资源文件
│ └── ...
├── static/ # 静态资源文件目录 (直接拷贝到dist/static/里面)
├── test/ # 测试文件目录
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .eslintignore #
├── .eslintrc.js # ES语法检查配置
├── .gitignore # 用来过滤一些版本控制的文件，比如node_modules文件夹
├── .postcssrc.js #
├── index.html # 入口页面
├── package.json # 项目描述文件：记载着一些命令和依赖还有简要的项目描述信息
├── package-lock.json #
└── README.md #介绍自己这个项目的，可参照 github上star多的项目。
dist : 打包输出目录，只需部署这个目录到生产环境。
(2) 安装项目依赖：在项目所在路径下，输入命令cnpm install
因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。
(3) 启动项目（启动开发环境）：在项目所在路径下，输入命令npm run dev来启动开发环境
备注：执行cnpm run dev命令后，浏览器会自动打开默认网址展示“欢迎页面”，若没有自动打开，原因可能是目录中config下的index.js文件中autoOpenBrowser的值是false，改为true就能自动打开了。
(4) 打开默认网址
若默认网址没有加载出页面，有可能是本地的 8080 端口被占用了（默认服务启动的是本地的8080端口），可参考解决端口占用问题将占用8080端口的进程杀死，或通过修改配置文件 config>index.js里的端口号来解决。
修改默认端口号.png
4. 项目打包（打包生产环境的代码）并上线部署
项目开发完成之后，输入
npm run build来打包生产环境的代码，打包成功会生成dist文件夹（里面有index.html文件和static文件夹）；项目上线时，只需要将 dist 文件夹放到服务器就行了。
备注：Vue项目创建(使用Vue脚手架工具)、启动并打包部署 类似 Angular项目创建(使用Angular脚手架工具)、启动到打包部署，可对比学习。
