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 有些许不同

  • 启动命令行有变化
  • 配置可以保存