Vue CLI 简介

Vue CLI是一个用于开发Vue.js项目的脚手架工具，人们在用Vue开发项目时往往要用到很多的插件以及打包工具，而Vue CLI的存在帮助开发者省去了手动配置开发工具的麻烦，以用户界面的方式让开发者能在几分钟内快速初始化项目，把重点放在开发上。

实际上，Vue CLI是基于webpack和webpack-dev-server的，官方文档也有说明，你也可以手动进行配置。不过，Vue CLI 3的初始化步骤已经非常简便，即使不了解webpack，也可以用Vue CLI进行开发和生产。本文针对想用Vue CLI快速初始化项目的开发者，对webpack具体的配置将略过。

安装Vue CLI 3

本文将使用npm作为包管理器，你也可以使用yarn，这里不做过多说明。

npm install -g @vue/cli

查看Vue CLI的版本

vue --version

本文写作时的版本为3.2.3

新建项目

vue create my-app

你可以将上面的my-app替换成你自己的项目的名称

配置项目

接下来你就要在命令行中进行配置了

首先你需要决定是否使用预设配置，这里本来应该只有后两个选项，由于我之前已经用Vue CLI初始化过项目并保存了配置，我现在可以直接使用我此前保存过的配置选项来初始化。你也可以选择官方的默认配置，只用babel和eslint。我们这里选择最后一个选项，手动配置。

---

在这里你就可以选择你的项目需要的功能了，简单说明一下这几个功能。

• Babel：用Babel来转译JavaScript
• TypeScript：TypeScript支持
• Progressive Web App (PWA) Support：渐进式网页应用支持
• Router：是否使用Vue Router
• Vuex：是否使用Vuex
• CSS Pre-processors：是否使用CSS预处理器（如Sass，Less都是常见的CSS预处理器）
• Linter / Formatter：代码检测，代码风格检测，代码格式化
• Unit Testing：单元测试
• E2E Testing：E2E测试

这里我使用我个人常用的几个选项进行初始化，如图。

---

首先是关于Vue Router的问题，是否使用history模式。如果使用history模式需要在后端额外的配置，Vue Router默认的是hash模式，这种情况下你的url里会出现一个#，看起来比较丑。如果要了解更多关于Vue Router的history模式，请移步官方文档。为了操作方便我这里使用默认的hash模式，输入n。

---

接下来我们要选择一个CSS预处理器，请根据个人习惯选择，我个人习惯使用Sass，这里选择Sass/SCSS。

---

接下来我们要为ESLint选择一种代码风格，简单介绍一下这几个选项。

• ESLint with error prevention only：仅对产生报错的代码提出警告
• ESLint + Airbnb config：使用Airbnb风格的代码
• ESLint + Standard config：使用Standard风格的代码
• ESLint + Prettier：使用Prettier对代码进行格式化

根据你的开发习惯进行选择，我个人偏好使用Airbnb规则，Airbnb规则非常严格，但能有效保证代码的可读性和效率，对个人的编码规范也是一种提升。

---

这是让我们选择代码风格检查的时间，Lint on save是当保存时检查，Lint and fix on commit是在提交代码时进行检查和自动修复。如果是个人的项目一般就选择保存时检查，团队有需要时选择第二项，这里我们选择Lint on save。

---

选择单元测试工具，这里只有两个选项，我个人更熟悉Mocha，所以我这里选择Mocha + Chai。

---

这里我们要选择如Babel，PostCSS，ESLint配置文件的存放方式，In dedicated config files是让配置文件独立存放，In package.json是把配置文件都写在package.json文件中，为了管理方便我个人更喜欢单独存放。

---

最后要选择是否保存这次的配置选项，如果保存了就会像开头一样，当你下次用Vue CLI初始化项目时会有一个直接使用已保存预设配置的选项。

这一步选择完毕后，Vue CLI就会自动安装各种依赖，生成项目文件了，让我们打开文件夹看一下文件结构。

文件结构

Vue CLI帮我们自动生成了如图所示的文件结构，下面简要介绍一下这个生成的结构。

• node_modules：存放依赖包的文件夹
• public：公共资源文件夹，这里的favicon.icon可以被替换成你自己的网站icon
• src：资源目录
  • assets：静态文件目录
  • components：Vue组件目录，这里应当存放那些可被复用的组件，里面都是.vue文件
  • views：页面目录，这里是单个页面文件存放的地方，它们本质上也是组件，里面也都是.vue文件
  • App.vue：应用的主组件，可以理解为所有的页面都是这个组件的子组件
  • main.js：应用的入口文件，这里是Vue实例被初始化和插件被引入的地方
  • router.js：Vue Router文件
  • store.js：Vuex文件，实际开发过程中也可以将state，mutations和actions分开变成三个.js文件，再建一个vuex.js文件来引入上述三个文件，然后用一个名为store的文件夹包含这四个文件，在main.js里引入vuex.js，这样能更好地组织Vuex中的内容。
• tests：单元测试文件夹
  • unit：测试样例
• .browserslinstrc：浏览器支持配置文件
• .editorconfig：编辑器配置文件
• .eslintrc.js：ESLint配置文件
• babel.config.js：Babel配置文件
• postcss.config.js：PostCSS配置文件
• .gitignore：git忽略文件列表
• package.json：项目说明文件以及依赖包列表
• package-lock.json：依赖版本锁定文件
• README.md：Readme文件

脚本

Vue CLI 已经为我们准备好了开发时需要的几个脚本，可以在package.json的"scripts"字段中看到，下面介绍一下这几个脚本。

运行开发服务器

npm run serve

这个指令会开启本地调试，默认的端口是8080，Vue CLI用了webpack-dev-server，所以开发服务器有热更新功能，让我们执行这个命令，并访问localhost:8080，可以看到Vue项目的初始页面。

这个页面也是一个Vue单页应用的例子，其中最上面的导航栏是在App.vue部分中的，也就是说在所有页面都会出现的，其余部分都是views/Home.vue文件中的内容，也就是一个页面文件。其中只有这个Logo和下面的一行大字是在Home.vue文件中写死的，下方部分来自components/HelloWorld.vue，也就是说这部分是一个可复用的组件。这个页面向我们介绍了views中文件和components中文件的关系，我们可以得到这样一个关系，App.vue是views中组件的父组件，同时views中的组件是components组件的父组件。

构建到生产环境

npm run build

这个命令会产生一个用于生产环境的dist文件，dist是distribution的简写，也就是发布的意思，官方文档中对在不同的服务商环境中部署有详细的介绍，可以移步官方文档来查看部署方法。

代码检查

npm run lint

单元测试

npm run test:unit

参考

1. Vue CLI 3

欢迎大家访问我的GitHub主页https://github.com/DaKoala与我交流!