Vue Cli 3 官方文档：https://cli.vuejs.org/zh/guide/
一、安装 @vue/cli
1、更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli。
2、如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，可以使用以下命令卸载掉（也可以直接安装新版本@vue/cli）：
npm uninstall vue-cli -g
或者
yarn global remove vue-cli
然后重新安装新版本的 @vue/cli：
npm install -g @vue/cli
或者
yarn global add @vue/cli
3、安装完成之后，使用vue -V查看版本号。
二、创建项目的三种方式
1、1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目，3.x 也支持这种方式，其运行结果和以前一样。
如果仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project
2、3.x快速创建项目：
vue create my-project
这里的 my-project 是自定义的项目名称，命令执行之后，会生成对应文件夹。
使用 create 命令创建项目的时候，有很多配置项需要选择。选择配置的时候，看个人项目需求。（注意，空格键是选中与取消，A键是全选）
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
Vue CLI v3.8.4
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
❯◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex），这里推荐选择第二项 Manually select features。
然后根据自己的需求，使用空格键选择具体的模块，这样就会创建一个包含 vue-router、vuex 和 postcss 的项目。
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式，实际项目通常采用 history 模式。
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
选择一个合适 CSS 的预编译工具，如果都不熟悉的话就选 sass 或者 less，因为 stylus 不支持原生 CSS 写法。（node-sass是自动编译实时的，dart-sass需要保存后才会生效，sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现），这里推荐使用dart-sass。
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
❯ ESLint + Prettier
我选择的是ESLint + Prettier，使用ESLint+Prettier来统一前端代码风格。可参考ESLint+Prettier。
? Pick additional lint features: (Press to select, to toggle all, to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
选择语法检查方式，第一个是保存检测，第二个是fix和commit的时候检测，个人选择保存就检测。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
配置文件存放地方，第一个是独立文件夹位置，第二个是在package.json文件里，选择In dedicated config files。
? Save this as a preset for future projects? (y/N)
询问是否记录这一次的配置，以便下次使用，选择y，下次创建项目时会出现vuecli3的选项可供选择，指向的vuecli3是因为这次记录过的cli3配置，第一次执行create是没有的。
最后回车确定等待下载，装好后，启动cd my-project 进入到项目根目录，npm run serve 启动项目。
3、vue/cli 3.x 新增了图形化的方式来创建项目
vue ui
浏览器会打开一个页面，可以按照页面将的引导创建项目。
三、其他配置项
3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置。
1、vue.config.js
手动创建一个vue.config.js，官方的配置文档可以参考这里：vue配置参考。
// vue.config.js
module.exports = {
baseUrl: '/',
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
}
vue.config.js 还有很多其他的配置项，比如构建多页面应用的 pages、改造为 pwa 的配置项 pwa、高级 CSS 打包方案 css，需仔细研究官方文档。
2、环境变量
项目通常有三种模式：开发模式 development、测试模式 test、生产模式 production，而开发中通常会根据环境变量 NODE_ENV 来进行区分这三种开发模式。3.x直接在根目录下创建以 .env 为前缀的文件，如
.env
.env.development
.env.production
.env.test
这里的 .env 文件保存的是公用参数，可以在所有模式中获取到，而其他文件中的参数，只能在对应模式中获取到，比如 .env.development 中的参数，就只有在 development 模式下生效。
在文件内添加对应的键值对：
AHTHOR=V.H.
WHEN=20190623
WHERE=BEIJING
然后在 package.json 的 scripts 命令中添加对应的 mode：
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint --mode test"
},
// serve、bulid 都有默认的模式，但最好是将模式显式的展现在配置项中
然后就能在项目中获取到对应模式下的值:
console.log(process.env.AHTHOR)
//V.H.
关于环境变量和模式的详情，可以参考官方文档:环境变量和模式。
四、参考文章
作者：Wise.Wrong
Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目