目前vue-cli的家族成员有：vue-cli2和vue-cli3，对于vue-cli2如何构建vue项目应该是都聊熟于心，本文简单介绍一下使用vue-cli3构vue项目。
一、Vue CLI是基于vue.js进行快速开发的完整系统（脚手架工具），它主要由三部分组成：
1、CLI:通过@vue/cli安装的npm包，其提供了终端里的vue命令（例如：vue serve 、vue create 、 vue ui等）
2、CLI服务：@vue/cli-service是基于开发环境的依赖，构建于webpack和webpack-dev-server之上，提供的命令有serve、build、inspect、test等
3、CLI插件：用户给vue项目提供可选功能的包，比如说eslint集成、babel转义、typescript转义、e2e和unit测试等
二、vue-cli3构建项目过程：
1、如果你的电脑之前安装了vue-cli2，那么首先需要卸载它
npm uninstall vue-cli -g
或者如果你是用yarn安装的话，就使用yarn命令进行卸载
yarn global remove vue-cli
2、卸载完vue-cli2之后，我们使用下面命令进行vue-cli3的安装
npm install -g @vue/cli
或者使用yarn命令安装
yarn global add @vue/cli
3、安装完之后可以查看版本
vue -V
或者
vue --version
4、创建项vue项目，工程名取名为任意你想取得名字（不支持驼峰式命名），如：vue-test
vue create vue-test
5、首先会提示你选择一个预设（preset）：
除最后两个，其他选项都是你此前保存的预设配置，如果没有配置保存过，则只有以下两个选项，
可以按电脑的上下方向键选中后，进行enter选择，一般推荐手动配置（Manually select features）：
① default（babel，eslint）：默认设置非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
② Manually select features：手动配置是我们所需要的面向生产的项目，提供可选功能的 npm 包
6、选择手动配置之后，接下来会显示可供你选择的preset，你可以根据自己的项目需要进行操作电脑上下方向键，
利用空格键进行选择或取消选择
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
7、之后会再弹出提示是否在router中使用history mode ，可以根据你的项目情况进行选择
vue-router提供了浏览器本身的history模式和hash模式来实现前端路由
hash模式：例如http://12.3.44.20:60/#/user,其中#/user就是hash，hash是不包含在http请求中的，改变hash值对后端没
任何影响，不会重新加载页面
history模式：这个是利用HTML5 History Interface中新增的pushState和replaceState方法，往往需要后端进行支持
8、之后再弹出css的预处理器，你可以根据项目使用的样式库（less\sass等）进行选择
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
SCSS/SASS //Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
LESS //Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
Stylus //Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。
9、之后再弹出请选择插件化的JavaScript代码的检测工具
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config //个人更喜欢用这个
ESLint + Prettier //使用较多
10、插件化的JavaScript代码的检测工具用于何时检测
? Pick additional lint features: (Press to select, to toggle all, to invert selection)
( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
11、项目选择的单元测试
? Pick a unit testing solution: (Use arrow keys)
Mocha + Chai //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
12、项目如何存放配置
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In dedicated config files // 独立文件放置
In package.json // 放package.json里
13、最后一步，确定是否保存本次配置以便下次可以直接使用：
? Save this as a preset for future projects? (Y/n) // y:记录本次配置，然后需要你起个名; n：不记录本次配置
14、搭建完成项目的结构如下：
