【 Vue全家桶 · Vue CLI（二）】Vue CLI 4.0 的详细使用攻略（2020.10最新版）

前言 —— 本地环境搭建

使用Vue CLI 4.0搭建项目之前，你要确保你的本地已经安装好了node.js环境（推荐 v10 以上）以及npm。可查出版本号即可：

之后就可以使用npm全局安装我们的Vue CLI 4.0：

npm install -g @vue/cli
vue -V

一. 创建项目文件

Vue CLI 4.0中全新的项目创建命令为：

vue create project-name //文件名 

注意： 这里的文件名不能出现大写字母（驼峰命名法无效）。

二. 选择配置方案

之后会让我们选择创建项目的配置方案：

可以看到在最新版中有三个选项：

• Default（[Vue 2] babel，eslint）—— 基于Vue 2语法的默认配置；
• Default（[Vue 3 Preview] babel，eslint）—— 基于Vue 3语法的默认配置；
• Manually select features —— 自定义选择配置；

---

❀ 拓展一下❀

之前一直都是Vue 2.0版本，所以并没有其中的第二个选项。而在前段时间（2020.9.19 凌晨），官方终于发布了Vuejs 3.0的正式版本，代号：海贼王（One Piece）。

发布的英文原文地址：v3.0.0 One Piece

---

回到这一步的选择中，我们选择第三项：自定义配置（Manually select features）。通过键盘 ↑ ↓ 键选择选项，之后回车确定选择并下一步。

三. 自定义的可选配置项

这里会列出所有的可配置项供我们选择：
（操作为：按 空格space 是选中或取消选中，按 a 是全选，按 i 是反选）

有关每一个可配置项的简单介绍如下：
（如果你选择了其中某些项，你可以点击下表中对应的名称，快速查看该项详细的进一步配置信息）

可配置项	简介	备注
Choose Vue version	选择Vue版本	为新增项， 需要进一步选配Vue语法版本（2.x / 3.x Preview）
Babel	转码器	可以将ES6代码转为ES5代码
TypeScript	JavaScript的超集语言	包含并扩展了JavaScript语法，需要被编译输出为JavaScript才能在浏览器端运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue路由管理器	Vue全家桶成员之一，学习建议选配
Vuex	vue状态管理模式	Vue全家桶成员之一，中大型项目常选，学习建议选配
CSS Pre-processors	CSS预处理器	需要进一步选配 less / sass / stylus
Linter / Formatter	代码风格检查和格式化	需要进一步选配ESlint
Unit Testing	单元测试	企业开发常选，学习不建议选配
E2E Testing	end to end测试	企业开发常选，学习不建议选配

其中除了Choose Vue version和Babel前两项是推荐大家固定默认选择的，其他选项原则上来说都可以根据你实际项目需要自由选择。

还要说明的是，这里的选项并不是只能在这里添加，Vue中也支持项目后期以插件的形式自由添加这些选项。

这里我为了日后看的方便，就全选一次：

之后需要进一步选择的细节，我都会罗列。所以后续的章节可以选择性跳过。

① 选择Vue语法版本

是Choose Vue version选项的进一步配置，供用户自由选择项目的Vue语法版本，鉴于海贼王（Vue 3.0版本）刚刚面世，市面上还没有大面积的普及，还是以Vue 2.0居多。

所以新手入门来说，还是推荐大家从2.0版本开始学习Vue语法基础。

② class风格的组件语法

是否使用class风格的组件语法，推荐使用，输入 y 即可：

? Use class-style component syntax? (Y/n)

③ babel做语法转义

是否使用babel做语法转义，推荐使用，输入 y 即可：

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

④ 选择路由模式

提示如下：是否使用历史路由模式 ？输入yes即代表你选用历史路由模式（history mode）；输入no则代表你选用的是哈希路由模式（hash mode）。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

路由的具体表现为浏览器地址栏中的URL链接地址。浏览器中支持两种不同的路由特性，所以对应的路由模式就以下两种：

① 历史路由模式（history mode）

典型URL格式为：https://www.abc.com/hello。在该模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。如果后端缺少对 /hello 的路由处理，将返回 404 错误。所以历史路由模式需要在后台配置路由信息。

② 哈希路由模式（hash mode）

典型URL格式为：https://www.abc.com/#/hello，该地址的hash的值为 #/hello。它的特点在于：hash值虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响。从始至终请求的都是一个页面，不需要在后台配置路由信息，这部分工作现由前端完成。

---

一般情况下，两种模式均可，不过这里我推荐NO。这样开发完成后，打包出来丢到服务器上就可以直接使用了。选yes的话还需要到服务器那边进行设置。

之后讲到Vue Router的时候，还会重点分析这两种路由模式。之后来更新链接~

⑤ 选择CSS预处理器

这里主要有三种CSS预处理器可供选择：Sass，Less和Stylus。

其中Sass又细分为：

• Sass/Scss(with dart-sass) —— 自动编译实时生效；
• Sass/Scss(with node-sass) —— 需要保存后才会生效；

不过 sass 官方目前主推 dart-sass ，最新的特性都会在这个上面先实现。所以这里我选择Sass/Scss(with dart-sass)。

⑥ 选择代码规范检测工具

Vue提供一个插件化的javascript代码规范检测工具，其中ESLint + Prettier使用较多，建议选择。（其实吧，这个东西用起来还是比较烦的）

具体可总结为以下两点：

• 确实可以提高我们写代码的规范性，也便于团队开发中代码格式的一致性管理；
• 规范太严苛了，尤其是令人抓狂的缩进… 喜欢自由的不建议选择；

⑦ 选择什么时候进行代码规则检测

两个选项的意思分别是：

• Lint on save —— 保存就检测；
• Lint and fix on commit —— fix和commit时检测；

建议选择第一项 Lint on save（保存就检测）。这样检测才是实时的，不然等到commit的时候，问题可能都已经积累很多了。

⑧ 选择单元测试框架

测试这一块实在不熟，这里我也是借鉴的大佬博客。具体选什么，你们有需要的，肯定比我懂得多~🐶

• Mocha + Chai —— mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装；
• Jest —— 安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha，Jest配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect；
  

⑨ 选择E2E测试框架

E2E（End To End）即端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

可以看到，Vue中推荐使用的E2E测试框架有以下三种：

框架	断言	实现	是否跨浏览器支持	开源
cypress	Chai、Chai-jQuery 等	Chrome	否	是
nightwatch	assert 和 Chai Expect	selenium	是	是
webdriverIO	mocha 和 Chai	selenium	是	是

难搞，突然有点想试试前端自动化测试，怎么肥事 ？全栈冲冲冲！？！

• cypress —— 安装方便，测试写法和单元测试一致，只支持 Chrome 类浏览器，有支持其他浏览器的计划；
• nightwatch —— 需要安装配置 selenium，selenium-server需要安装jdk（Java Development Kit）；
• WebDriverIO —— 可拓展性非常高，相比较原生Selenium而言，WebDriverIO 的代码非常的简单易懂，api和方法与jquery相似，非常方便前端上手。同时WebDriverIO 也支持mobile端的测试；

不太懂，就先选了个nightwatch，之后还有一步选择测试所用的浏览器环境：

这里有Chrome和Firefox两兄弟，不过我选Chrome，毕竟永远滴神！！

四. 选择配置存放位置

（到这一步，之前的配置过程就算是全搞完了，这全家桶也太顶了… 从来没觉得到这一步有这么远，额…）

配置文件的存放位置有两个选择：

• In dedicated config files —— 每项配置的信息均以独立文件的形式存放；
• In package.json —— 所有配置项的信息都存放在package.json文件内；

由于我们这里配置项实在是有点多，就选独立文件存放吧。最后生成的项目目录截图为：

实际上你们在创建项目时，会用到的配置项并不多，也可以选择都放在一个package.json文件内。

五. 是否保存当前配置为预设

最后一步还会问你，是否要保存当前配置为预设 ？

输入yes即为保存，之后你还需要给这套配置方案命名。等你下次创建项目时，它就会出现在1.2节里的那一步的可选项列表，就能让你快速创建出符合你需求的项目。

? Save this as a preset for future projects? (y/N)

我这里就不保存了，你们平时倒是可以保存一套适合自己的配置方案，方便学习。

最后附上我本次项目创建的所有配置的过程记录：

六. 等待项目的创建完成

配置阶段完成后，剩下的就交给Vue CLI 4.0 吧！他会帮我们构建好项目结构，安装好项目所需的各种依赖和插件。

七. 运行项目并访问

看到下图中的成功信息，就说明你的项目构建完成啦！

可以继续执行提示的代码，来运行你的项目：

等待项目运行成功，如下图所示。他会告诉你：项目已经部署在你本地的8080端口了！
（不要纠结我这里为什么不是8080，问就是端口被占用了，所以顺延8081）

直接ctrl + 鼠标左键单击本地链接（或者你自己在浏览器地址栏手动输入链接）即可在浏览器中打开，就像下图这样~ 我这里选配了TypeScript语言，所以可能会有些许不同。

---

写在最后

这一篇基础的使用Vue CLI 4.0工具创建Vue项目的过程解析，内容多到着实让我出乎意料，不过还是耐着性子写完了。

之后还打算写一篇利用Vue UI这个可视化的工具来实现对Vue项目的管理（主要演示创建过程）。

每一个不曾起舞的日子,都是对生命的辜负!

—— 尼采