Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过 @vue/cli 搭建交互式的项目脚手架
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
- 一个运行时依赖 (@vue/cli-service)，该依赖
- 可升级
- 基于 webpack 构建，并带有合理的默认配置
- 可以通过项目内的配置文件进行配置
- 可以通过插件进行扩展
- 一个丰富的官方插件集合，集成了前端生态中最好的工具
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面
安装
Vue CLI 需要 Node 环境，确保已经安装 Node 环境和 npm 包管理工具
$ npm install -g @vue/cli
创建项目
$ vue create hello-world
Vue CLI v3.3.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) //默认选项提供 babel 和 eslint 支持，适合快速创建一个新项目的原型
Manually select features //手动选择特性，提供了更多的选项，它们是面向生产的项目更加需要的
上下键选择、Enter 选中，我们选择第二项手动选择特性
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel //支持babel
◯ TypeScript //支持使用 TypeScript 书写源码
◯ Progressive Web App (PWA) Support
◯ Router //支持 vue-router
◯ Vuex //支持 vuex
◯ CSS Pre-processors //支持 CSS 预处理器
◉ Linter / Formatter //支持代码风格检查和格式化
◯ Unit Testing //支持单元测试
◯ E2E Testing //支持 E2E 测试
基于开发常见的项目，同时兼顾项目健壮性的原则，选择如下选项：
Vue CLI v3.3.0
? 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
开发 Vue 组件时是否使用 class 风格的写法 （是）
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? (Y/n) Y
是否使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills （是）
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) Y
vue-router 是否使用 history 模式 （否，使用默认 hash 模式）
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
项目里面使用哪种 CSS 预处理语言（选择 LESS ）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS
❯ Less
Stylus
选择哪个自动化代码格式化检测（选择 ESLint + Prettier ）
? Pick a linter / formatter config: (Use arrow keys)
TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
❯ ESLint + Prettier
选择什么时候进行代码规则检查
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save //保存就检查
◯ Lint and fix on commit // fix 和 commit 的时候检查
选择单元测试工具 （ 选择 Mocha ）
Mocha 是流行的 JavaScript 测试框架之一，通过它添加和运行测试，Chai 是断言库
? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
Jest
选择配置文件的位置 （ 选择独立文件存放 ）
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
❯ In dedicated config files //配置存放独立文件
In package.json //配置存放 package.json
是否将以上这些将此保存为未来项目的预配置，对于 MAC 保存的配置信息会放在 ~/.vuerc 里面 （否）
? Save this as a preset for future projects? (y/N)
下一步初始化 CLI 插件
Vue CLI v3.3.0
✨ Creating project in /Users/abner/work_space/projects/vue-project/hello-world.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
......
启动项目
$ cd hello-world
$ npm run serve
浏览器看到的页面如下：
代码结构：
打包上线
项目开发完成之后需要打包上线，vue-cli 也提供了打包的命令
$ npm run build
打包好的静态资源会保存在 dist 目录，直接部署到静态资源服务器即可。
单元测试
$ npm run test
后记
这里使用的是 vue-cli 3.0，相比 vue-cli 2.X 有些许不同
- 启动命令行有变化
- 配置可以保存