VueCLI

1.VueCLI 脚⼿架简介

⼀、本节⼤纲

• VueCLI 简介
• VueCLI 与 webpack 之间的关系
• VueCLI 的两个版本

⼆、 VueCLI 简介

VueCLI 官⽅⽂档地址: https://cli.vuejs.org/zh/

VueCLI（Vue Command-Line Interface ）致⼒于快速构建基于 webpack 的 vue 初始化项⽬。在前⾯的章节，我们已经给⼤家讲了⼀个系列内容《使⽤ webpack ⼿动搭建 vue 项⽬脚⼿架》，实际上就是在给⼤家讲 VueCLI ⽣成的项⽬脚⼿架的实现细节。

例⼦：组装电脑与品牌机

实际上 Vue CLI ⽣成的 Vue 项⽬初始化代码，就相当于是使⽤品牌电脑，快速上⼿，使⽤⽅便，兼容性好，⽽且有⽐较好的技术⽀持。那我们⾃⼰基于 webpack 实现 vue 项⽬脚⼿架，就相当于是在⾃⼰组装⼀台电脑，组装的过程⽐较繁琐，但是我们更能够了解内部的集成原理。也就是说：我们学习⼿动搭建基于 webpack 实现 vue 项⽬脚⼿架还是有必要的，当“品牌机”出现问题，我们能够⽐较快速的定位与维修调整。

那么，Vue CLI 品牌机都默认帮我们做了哪些核⼼功能？

• Vue CLI 封装了完整的静态资源模块化打包⽅案
• Vue CLI 提供了本地的热加载调试服务
• Vue CLI 还提供了预处理，⽂件转译，⾃动化测试和静态检测等功能
• Vue CLI 提供了快速开始零配置的原型开发

三、VueCLI 与 webpack 之间的关系

简单地说就是：

• Vue CLI 是基于 webpack 配置实现，所以 Vue CLI 依赖于 webpack
• webpack 依赖于 NodeJS，所以使⽤ Vue CLI 之前要先安装好 NodeJS（包含 npm 包管理⼯具）

VueCLI 的核⼼封装内容都是使⽤ webpack 来实现的。很多⼈说：Vue 并不难学，难学的是 Webpack 。 其实：Vue 并不难学，webpack 也不难学，难学的是前端⼯程化的思想和前端⼯程化的实践！⽽ Vue CLI 就是前端⼯程化的思想的集中体现。

四、VueCLI 的版本

⽬前有两个版本：Vue-CLI2.x 和 Vue-CLI3.x+。在 Vue CLI2 推出之后，很多初学者主要的学习难点在于：webpack 配置管理。由于对前端⼯程化理解不够，感觉学习成本⾼，难于配置。

针对这个问题，Vue 团队从 Vue-CLI3.x 版本做了 2 个主要改进：

• 隐藏 webpack 配置，因为 webpack 配置绝⼤部分都是模板配置，每个项⽬的配置⽅法都差不多。在此基础上，提供了个性化修改⼊⼝。从⽽简化了项⽬⽬录结构，使配置⽂件更加清晰。
• 提供 UI 界⾯化配置的服务，使 Vue-CLI3+ 上⼿更加容易。

凡事都有两⾯性： 习惯了使⽤ Vue-CLI2.x 的开发者，对 Vue-CLI3.x+反⽽不满意：

• 把配置⽂件都隐藏起来⼲嘛？看着是清爽了，是不是不⽤学 webpack 了？掩⽿盗铃。
• 提供⼀个 UI 界⾯作什么？程序员还⽤ UI 界⾯？有没有点极客精神了？

其实这就是⼀个仁者⻅仁智者⻅智的问题，有的⼈就是喜欢⽤轻量级 vim，有的⼈就是喜欢重型 IDE 。有 ⼈觉得 windows 的 UI 好⽤，有⼈就是觉得 linux、MacBook 的命令⾏好⽤。 实际上 Vue-CLI3.x+ 就是想在 Vue-CLI2.x 的基础上，做配置管理的减法。

2.使⽤ VueCLI2 快速搭建项⽬

⼀、本节⼤纲

• 使⽤ VueCLI2 的前提
• 安装 Vue CLI2
• 使⽤ Vue CLI2 初始化⼀个项⽬
• 如何解决创建过程缓慢卡死的问题

⼆、使⽤ VueCLI2 的前提

• 需要安装 NodeJS ，NodeJS 的版本要⾼于 8.9 或以上版本
• 安装 NodeJS 并随之安装了 NodeJS 的包管理⼯具 npm
• Vue CLI 脚⼿架默认使⽤ webpack 作为模块化资源打包⼯具，所以需要安装

NodeJS 和 npm、webpack 的安装在之前的章节都已经提到，webpack 的安装命令如下：

npm install webpack -g

三、安装 Vue CLI2

全局安装 Vue CLI2，在随意⼀个⽬录下，打开命令⾏⼯具输⼊命令：

npm install -g vue-cli

安装完成之后，可以通过 vue -V 命令查看全局安装的版本

四、使⽤ Vue CLI2 初始化⼀个项⽬

在安装完成 Vue CLI2 及必备的⼯具包之后，我们就可以使⽤ Vue CLI2 初始化⼀个项⽬了。使⽤如下命令：

vue init <template_name> <project_name>

• <template_name> 表示模板名称
• <project_name> 表示项⽬名称

Vue CLI2 就是通过远程下载项⽬模板，来初始化⼀个项⽬。官⽅提供的项⽬模板如图所示：

其中我们最常⽤的模板就是 webpack，其他模板可⾃⾏创建学习。所以最终的项⽬初始化命令如下：

vue init webpack vuecli2demo

执⾏ vue init 命令之后，vue 脚⼿架会让我们做⼀些选择。

• Project name：填写项⽬名称，如果不填默认为命令⾏ project_name
• Project description：填写对项⽬的描述，会体现在 package.json 中，后期可以修改
• Author：项⽬作者及邮箱，会从本机的 git 配置⾥⾯⾃动读取
• Vue build：Runtime Only 或者 Runtime+Compiler ，在《⼿搭脚⼿架- webpack 整合 vue》的章节已经介绍了两者的区别
• Install vue-router：是否安装 vue-router 前端路由，我们暂时没学到，不安装 No
• Use ESlint to lint your code：是否使⽤ ESlint 做编码规范检查，检查不通过则编译不通过。如果你对 ESLint 编码规范⽐较熟悉，这⾥可以选择 Yes
• Set up unit tests：是否初始化单元测试，这⾥暂时没学到，不安装 No
• Set up e2e test with NightWatch： 是否引⼊端到端的测试框架 NightWatch，不安装 No
• Should ……created：包管理⼯具是使⽤ yarn 还是 npm ？这⾥我们使⽤ npm，如果你习惯使⽤ yarn 可以选择 yarn

完成以上的选项之后，会⾃动为我们创建⼀个名称为 vuecli2demo ⽬录及项⽬⽂件。

项⽬⽬录结构如下：

访问http://localhost:8080，可以看到如下的界⾯，表示项⽬初始化成功

五、如何解决创建过程缓慢卡死的问题

由于众所周知的原因，可能在下载远程模板的时候出现缓慢、甚⾄卡死的情况。我们可以将 npm 包管理⼯具的下载源更换到国内的服务。

先⽤ npm get registry 命令查看⼀下当前的源

替换为国内的 npm 源，命令如下：

npm config set registry http://registry.npm.taobao.org/

此时再⽤ npm get registry 命令查看⼀下当前的源，就是修改之后的国内的源地址了，下载更为快速。

3.VueCLI2 ⽬录⽂件详解

⼀、本节⼤纲

• 项⽬⽂件⽬录概述
• 构建过程调⽤关系说明
• src ⽂件夹说明

⼆、项⽬结构概述

相信通过学习之前的《前端⼯程化-⼿动搭建 Vue 项⽬脚⼿架》，对于项⽬的⽂件夹及⽂件结构已经有所了解。下⾯集中进⾏⼀下整理和总结。

• build ⽂件夹内的⽂件是 webpack 资源模块化打包的核⼼配置⽂件，包括⽣产环境资源打包、测试环境资源热更新服务、npm 及 nodejs 版本检查⽂件、vue ⽂件处理等配置。
• config ⽂件夹内的主要是⼀些：⽣产及测试环境常⽤环境变量相关的配置，如静态资源打包路径、 测试环境服务端⼝、host 等信息。
• src ⽂件夹主要存放源代码⽂件，如 js ⽂件、vue ⽂件。src/assets ⽤于存放静态资源⽂件，如：css ⽂件、图⽚⽂件等等。这是开发⼯作的核⼼⽬录。
• static ⽂件夹是 webpack 默认存放静态资源（ css、image ）的⽂件夹，与 src/assets 不同的是： static ⽂件夹内容在打包时会直接复制⼀个同名⽂件夹到 dist ⽂件夹⾥，不会参与 webpack 的编译过程。
• dist ⽂件夹，上图中没有，是资源模块化打包结果⽂件夹。在资源打包后会⾃动创建，⽣产环境上线发布的就是这个⽂件夹的内容。
• node_modules ⽂件夹是第三⽅类库安装⽬录，通常不需要开发⼈员⼿动修改。
• .babelrc 是 js ⽂件编译兼容性配置⽂件，在《前端⼯程化-⼿动搭建 vue 项⽬脚⼿架》系列⽂章我们详细讲过。
• .editorconfig 是 IDE 开发⼯具配置⽂件，WebStorm、Atom、Visual Studio(Code)、xcode 等都予以⽀持。
• .gitignore 这个是 git ⽂件版本管理⼯具忽略⽂件配置，程序员必学必会，不多介绍，如您不知道请⾃⾏补课。
• .postcssrc.js 主要是 css 浏览器兼容性处理，可以学习⼀下 PostCSS 了解更多。
• package.json 是前端项⽬配置⽂件，⽐如⼀些项⽬的启动、打包脚本，第三⽅依赖类库版本信息等都是在这个⽂件中。 package.json.lock 是 npm 安装具体第三⽅类库版本锁定信息，只查看不修改。
• README.md 以 mackdown 语法描述项⽬信息。

三、构建过程调⽤关系说明

build ⽂件夹下⾯的⽂件主要是 webpack 相关的环境配置⽂件，和 webpack 打包、编译相关的配置选项及相关⽂件。

⽣产环境打包的⽂件调⽤过程及逻辑

• 运⾏ npm run build 命令调⽤ build.js 进⾏⽣产环境模块化资源⽂件打包
• build.js 引⽤⽣产环境的变量配置⽂件中的变量 -config/index.js 和 prod.env.js
• build.js 根据 webpack.prod.js ⽂件以及⽣产环境 config 变量配置，进⾏⽣产环境模块化资源打包
• webpack.prod.conf.js 整合 webpack.base.js 基础 webapck 配置，及 vue-loader.conf.js 处理 .vue ⽂件

测试环境服务启动及调试过程及逻辑

• 运⾏ npm run dev 命令调⽤ webpack-dev-server 命令( package.json 脚本配置)，以 webpack.dev.conf.js 作为⼊⼝配置⽂件进⾏测试服务启动
• webpack.dev.conf.js 引⽤测试环境的变量配置⽂件中的变量 -config/index.js 和 dev.env.js
• webpack.dev.conf.js 整合 webpack.base.js 基础 webapck 配置，及 vue-loader.conf.js 处理 .vue ⽂件
• utils.js 主要在构建过程中的⼯具函数⽂件，主要的⼯具函数都是完成 css ⽂件的处理⼯作

四、src ⽂件夹说明

• assets ⽂件：⽤于存放静态资源，如 css ⽂件、image ⽂件
• components ⽂件夹：⽤来存放 .vue 单⽂件组件
• router ⽂件夹：⽤来存放前端⻚⾯路由配置信息⽂件
• App.vue：项⽬的主组件，所有的 vue 组件都是该组件的⼦组件或后代组件
• main.js：项⽬全局⽂件⼊⼝

4.使⽤ VueCLI3 快速搭建项⽬

⼀、本节⼤纲

• Vue CLI3.0 的安装
• Vue CLI2.0 与 3.0 版本的区别
• 使⽤ Vue CLI3.0 创建项⽬
• Vue CLI2.0 与 3.0 ⽬录差异
• 项⽬服务启动

⼆、 Vue CLI3.0 的安装

安装 Vue CLI3+ 之前，我们需要安装好 NodeJS ，8.9 或更⾼版本(推荐 8.11.0+)。

Vue CommandLine Interface 在 3.0 版本改名为@vue/cli，所以我们全局安装命令如下:

npm install -g @vue/cli

然后使⽤ vue --version 命令查看 CLI 脚⼿架的版本。版本为 3.x+ 就表示安装正确了。

注意：这⾥虽然使⽤的是 vue 命令，但查看的并不是 vue 的版本，⽽是 Vue CLI 的版本。

三、Vue CLI2.0 与 3.0+版本的区别

• 3.0+版本的构建速度⽐ 2.0 快，利⽤了多核与缓存的技术
• 3.0+版本 webpack 被内置到@vue/cli-service，可以很⽅便地升级。同时⼤量的 webpack 模板配置被隐藏到 @vue/cli-service ⾥⾯
• 3.0+版本 babel、TypeScript 等功能服务以插件的⽅式注⼊，⽅便引⼊与排除
• 3.0+版本提供了可视化的 Vue UI 命令，对于不习惯使⽤命令⾏的同学，更加⽅便易⽤

四、使⽤ Vue CLI3.0+创建项⽬

将不再使⽤ 2.0 版本的 vue init 命令，⽽是使⽤ vue create 命令，格式如下：

格式：vue create <project-name>
实例：vue create vuecli3demo

创建⼀个叫做 vuecli3demo 的项⽬，⾸先会提示我们，选择 default 默认项⽬功能特性，还是⼿动选择个性化项⽬功能特性。默认的项⽬特性，会帮我们安装 babel 语法兼容和 eslint 语法检查功能。

我们选择最后⼀个⼿动选择特性，进⼊到具体特性功能选择界⾯：

在这个界⾯，我们可以按 Up、Down 键上下移动，按空格键选择选项，选中之后，具体的功能特性前⽅会有星号标识。

• Babel ⽀持使⽤ babel 做转义。这个通常来说是必选的。
• TypeScript ⽀持使⽤ TypeScript 书写源码。如果使⽤到就选上。
• Progressive Web App (PWA) Support PWA ⽀持。我们还没学到，暂时不选。
• Router ⽀持 vue-router 。前端路由，还没学到，暂时不选。
• Vuex ⽀持 vuex 。我们还没学到，暂时不选。
• CSS Pre-processors ⽀持 CSS 预处理器。这个通常来说是必选项⽬。
• Linter / Formatter ⽀持代码⻛格检查和格式化。觉得语法检查过于严格，影响开发效率的可以不选。
• Unit Testing ⽀持单元测试。暂时不选。
• E2E Testing ⽀持 端到端测试。暂时不选。

选择完成之后回⻋，因为我们选择了 CSS 预处理器，所以需要具体告知。你习惯使⽤哪种 CSS 预处理器 就选择哪⼀种，SCSS 或 Less。

下⼀步，要把 Babel、PostCS 的配置⽂件放到哪⾥？⼀般都放到 dedicated config files (专⽤配置⽂件) ⾥⾯，⽽不是都放在 package.json ⾥⾯。

最后，CLI3.0 会询问我们是否将当前配置保存，下次可以直接使⽤，⽽不是再次选择填写。

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

如果选择 y ，就需要输⼊⼀个配置名称，以该名称来保存配置，⽤来下次创建项⽬直接使⽤。保存之后， 下次新建项⽬，会在 default 和 manually select features 基础上多出⼀个选项(第⼀步)。

五、Vue CLI2.0 与 3.0 ⽬录差异

• 3.0+ 版本没有 static ⽂件夹，取⽽代之的是 public ⽂件夹⽤于公开的静态资源访问。

• 3.0+ 版本将 index.html 移动到 public ⽂件夹⾥⾯了。

• 3.0+版本将 build 和 config ⽂件夹配置移除了，实际相关的配置仍然存在，只不过隐藏起来了。被内置到 @vue/cli-service。

六、项⽬服务启动

使⽤ npm run serve 命令启动项⽬（注意这⾥不再使⽤ 2.0 版本的 vue run dev 命令），访问图中的 http 地 址

在浏览器中看到如下内容表示 vue CLI3+ 项⽬创建成功

5.VueCLI3 ⾄ 4.0 版本升级指南

⾸先，需要全局安装 Vue CLI ，安装⽅式与 3.0 ⽅法是⼀样的。

npm install -g @vue/cli

1.⼀次性更新所有的插件

在已有的 3.0+版本构建的项⽬⾥⾯，执⾏如下命令：

vue upgrade

这样就完成了版本的升级，So Easy。

2. 插件⼀个个⼿动更新

如果你希望⼿动逐步升级，参考下⾯的内容：

2.1 全局@vue/cli

2.1.1 vue upgrade 被重新设计

• 升级之前: vue upgrade [patch | minor | major] , 这些命令只是安装最新版本的插件，除此之外什么都不做！
• 升级之后: vue upgrade [plugin-name]. 除了更新插件版本，还会⾃动化的完成升级过程。想要了解关于这个命令的⽤法，请运⾏ vue upgrade --help.

2.1.2 vue --version Output Format Change

当运⾏ vue --version 命令:

• 3.x: 版本显示格式如：3.12.0
• 4.x: 版本显示格式如：@vue/cli 4.0.0

2.1.3 为避免代码错误覆盖，增加确认步骤

当运⾏ vue invoke / vue add / vue upgrade 命令的时候, 增加了确认的步骤。如果你的当前本地库还有没有提交的代码，会有如下确认过程：

上图添加 typescript 插件，当前本地库还有没有提交的代码，建议先提交代码，再决定是否继续安装插件。

2.1.4 Vue Router 和 Vuex 插件

当执⾏ vue add vuex or vue add router命令:

• 在 v3 版本中, 只是安装将 vuex or vue-router 加到项⽬⾥⾯;
• v4 版本中, 除了将⼆者加⼊到项⽬⾥⾯，还会安装 @vue/cli-plugin-vuexor @vue/cli-pluginrouter 插件

这个变化对于最终⽤户不会产⽣任何变化或影响。但是这种设计在以后为 Vuex 和 Vue Router 添加更多的功能特性提供了便利的基础。

对于 preset 和 plugin 作用，这两个插件有很多⾮常值得关注的变化：

• 默认的⽬录结构发⽣变化:
  • src/store.js 移动到 src/store/index.js;
  • src/router.js 重命名为 src/router/index.js;
• 考虑到兼容性， preset.json 中的 router & routerHistoryMode 仍然被⽀持. 但是更建议使⽤ plugins: { '@vue/cli-plugin-router': { historyMode: true } } .
• api.hasPlugin(‘vue-router’) 不再被⽀持. 现在的写法是 api.hasPlugin(‘router’)

2.2 @vue/cli-service

2.2.1 template 中空格的编译处理

To get a smaller bundle, we’ve disabled the preserveWhitespace option of vue-template-compiler by default in Vue CLI v3.

为了获取体积更⼩的打包结果，在 v3 版本中去掉了 vue-template-compiler 中 preserveWhitespace （保留空格）。与此同时也引发了⼀些问题。

幸运的是, 从 Vue 2.6 版本开始，有了更好的空格处理⽅式, 使⽤新的 whitespace 选项。所以在 Vue CLI v4 中我们决定使⽤这个新选项。看下⾯的例⼦：

使⽤ preserveWhitespace: false 配置，所有的标签之间空格都被去除，编译结果如下：

使⽤ whitespace: 'condense' 配置, 编译结果如下：

注意：⾏内( inline )标签之间的空格被保留了。