一、安装vue-cli

安装vue-cli前提，你的电脑已经安装好了Node.js,因为vue-cli 安装是给予NPM（包管理工具）来进行安装的，同时安装好的同学，建议你们把NPM下载地址指定到淘宝NPM镜像地址，其原因就不说了，墙内人都懂。

安装命令

$ npm install -g vue-cli  // 替换了淘宝镜像的使用 cnpm
$ vue -V   // 查看vue版本号
2.8.1

-g（global）：代表全局安装，出现了 版本号，也就说明我们的Vue-cli已经成功的安装到了我们的计算机里了。

二、创建一个vue项目（初始化）

我们用vue init 命令来初始化项目

$ vue init <template-name> <project-name>

init : 通过vue-cli 来初始化构建一个vue项目
template-name : 模板名称，vue-cli官方给我们提供了5种模板。

• vue-cli 官方模板
  • webpack - 一个全面的webpack+vue-loader的模板，功能包括热加载（更新），linting（语法检测），测试和Css扩展。
  • webpack-simple - 一个简单webpack+vue-loader的模板，不包含其他功能，让你快速构建vue开发环境。
  • browserify - 一个全面的Browerify+vueify的模板，功能包括热加载，linting，单元测试。
  • browserify-simple - 一个简单的Browerify+vueify的模板，不包含其他功能，让你快速的构建vue的开发环境。
  • simple - 一个最简单的单页应用模板。

<project-name> : 标识项目名称

在实际开发中，普遍是使用webpack这个模板，我们来实际创建一个项目吧。

$ vue init webpack vuecliTest

执行命令后，会询问我们几个简单的选项，根据自己的需要进行确认就好。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

项目构建完成

三、运行项目

根据上图命令提示：

$ cd vuecliTest    //进入项目目录
$ npm install       //安装项目依赖包，根据package.json里的包，这里替换了淘宝镜像 使用`cnpm`来安装
$ npm run dev    //开发模式下运行我们的项目程序。给我们自动构建了开发用的服务器和浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。 

运行项目

出现上图，说明我们的项目初始化已经成功，我们可以开始来自由编写我们的程序了。

四、Vue-cli 项目目录解析

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- assets                       // 资源目录 
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                         // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|   |-- .postcssrc.js                // 通过JS插件装换样式的工具 
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息