运用 Vue CLI4.X 脚手架构建项目实战

本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

---

前言

前面使用 webpack 创建项目架构都是手动搭建的，讲 webpack与 各 种 loader 配 合 使 用 时 创 建 项 目 ， webpack 的 配 置（webpack.config.js）都是手动配置，比较麻烦，实际开发一般不会这么做，因为 Vue 给我们提供了脚手架工具 Vue CLI，通过 Vue CLI就可以自动搭建项目的基本架构及配置好基本的 webpack，下面就来学习 Vue CLI 的应用。今天学习的，主要是关于灵活运用 Vue CLI 搭建 vue 单页面项目框架，并理解框架含义。通过 vue.config.js 更改默认脚手架的一些配置。理解 CLI 服务命令和 Eslint 插件语法规则和配置。脚手架项目配合 axios 发送 ajax 请求的知识的理解和应用

---

一、什么是 Vue CLI 及其安装

1.1、什么是 Vue CLI

Vue-CLI 是 Vue 官方提供的（生态系统）, 用来搭建项目脚手架（类似建房子也要先搭架子）的工具，它是 Vue.js 开发的标准工具，它已经集成了 webpack , 内置好了很多合理默认配置（查看下上一个项目的 webpack.config.js 文件的配置，当然不满意需求，还可以自己再配置）, 使得我们在使用 Vue 开发项目时更加的快速、标准。

Vue-CLI 是一个丰富的官方插件集合，集成了前端生态中最好的工具【官网说的】。它还有一套完全图形化的创建和管理 Vue.js 项目的用户界面（我们讲通过命令来使用，学完之后感兴趣自己学习下图形界面操作就轻而易举）
参考官方文档：https://cli.vuejs.org/zh/github
站点：https://github.com/vuejs/vue-cli

说明：
Vue CLI 的包名称由旧版本 vue-cli 改成了新版本@vue/cli。
如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
新版卸载 :
npm uninstall @vue/cli -g
Vue CLI 是基于 webpack，而 webpack 是基于 nodejs 的。
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+ ，执行
node --version 可查看)。

1.2、安装 Vue CLI

打开 cmd 窗口，执行下面其中一个。从命名可以看出需要全局安装。
npm install -g @vue/cli
或者
yarn global add @vue/cli
说明：vue-cli3.0 以上版本名称@vue/cli；vue-cli3.0 以下版本叫 vue-cli

安装过程会同时安装很多相关依赖（插件），这个过程其实也就是配置 vue 的命令环境，这样安装之后，你就可以在命令行中访问 vue 命令，注意不是 vue-cli。vue 命令就是用来管理用脚手架创建的项目的命令。通过下面可以查看 Vue CLI 的版本，也可以验证下Vue CLI 是否正确安装。说明：
如果执行上面后，命令行提示 ‘vue’ 不是内部或外部命令。那
是因为当前命令行没有找到 npm.cmd 文件，这个文件是在安装好vue cli 之后会到全局目录下有，而系统环境找不到该目录（全局目录），所以找不到 npm.cmd 文件，命令就不识别。因此需要配置环境变量（系统变量），这样就能找到该全局目录，如下图，具体可以参见第 1 章内容（前面讲过）。

二、利用 Vue CLI 搭建 Vue 单页面项目——默认配置

安装好了 Vue CLI 脚手架之后，就可以用它来搭建项目。
概述：

2.1、运行 vue create 创建项目

先进入项目创建的位置，打开 cmd 窗口，运行执行下面命令
vue create 项目名称一般新建一个项目一般选择 default，一些提示见上图提示。
babel 是 ES6 的转换工具，解决浏览器兼容性问题；eslint 格式化代码工具，比如多余空行删除，语句是否以；结尾
选择到 default（babel，eslint）后回车，开始安装 Vue CLI。如果出现类似下图错误。
解决方案如下：
方法 1、
需要删除 npmrc 文件。强调：不是 nodejs 安装目录 npm 模块下的那个 npmrc 文件(nodejs\node_modules\npm), 而 是 在 C:\Users{ 账 户 }\ 下的.npmrc 文件。
方法 2、
直接用命令清理就行，控制台输入：
npm cache clean --force

安装好后根据提示进入项目根目录 cd vue-cli-demo1,然后运
行项目 npm run serve，就会开始构建项目并启动项目，构建完成之后按提示打开浏览器输入 http://localhost:8081/就可以看到初始项目运行后的效果。

2.2、查看项目

进入项目所在文件夹，文件如下：
（为了以后创建项目更快捷，你可以把这个项目的架构压缩保存起来）
通过 vscode 查看。结合运行效果，这里先重点介绍下面几个文件：
（1）HelloWorld.vue
（2）App.vue
（3）main.js
import Vue from ‘vue’ import App from ‘./App.vue’ Vue.config.productionTip = false
new Vue({
render: h => h(App), }).$mount(‘#app’)
有了前面几章的基础，这些代码看起来还是很简单的。
Vue.config.productionTip = false 含义：
意思是当前处于开发阶段，无需显示生产模式提示的信息，若不设置，浏览器会做出如下提示。说明：@vue/cli 创建的项目里并没有 webpack 配置文件，那么他是如何实现的？ ——分别封装到相关的 cli 工具里了（后面第四节会讲如何查看 webpack配置），如果自己需要添加新的配置，请学习第六节通过创建vue.config.js 文件进行配置

三、利用 Vue CLI 搭建 Vue 单页面项目——自定义配置

3.1、运行 vue create 创建项目

先进入项目创建的位置，打开 cmd 窗口，运行执行下面命令
vue create vue-cli-demo2
按 空格键 是选中或取消， a 键是全选，i 反选上面选项含义：
Bable, （常用）解决兼容性问题,支持 ES6 的代码转译成浏览器能识别的代码TypeScript, 它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。微软开发的Progressive Web App (PWA) Support, 渐进式的 Web 应用程序支持
Router, （常用）是 vue-router 路由。
Vuex, 是 Vue.js 应用程序的状态管理模式（常用）。
CSS Pre-processors, （常用）支持 CSS 预处理器, Sass/Less预处理器。
Linter / Formatter, （常用）支持代码风格检查和格式化。
Unit Testing, 支持单元测试。
E2E Testing, 支持 E2E 测试。
（以上需要的模块没有选择安装，后续也可以安装的）
这里选择上面红框框住的 4 项，接下来的配置提示会根据这 4个选择项来。回车之后接下来的提示及选择如下图所示：（保存的预配置名称叫 xzx-vue-cli）
成功创建后的 cmd 窗口如下图所示上面预配置文件在 C:\Users\你的用户名 目录下的 .vuerc 文
件中，打开及各个配置含义如下图所示。
说明：如果要删除预配置，只要把“presets”节内容全部删除即可。
安装好后根据提示进入项目根目录 cd vue-cli-demo2,然后运
行项目 npm run serve（vue-cli3.0 以下版本默认的启动命名是 npmrun dev），就会开始构建项目并启动项目，构建完成之后按提示打开浏览器输入 http://localhost:8081/就可以看到初始项目运行后的效果

3.2、查看项目

说明：为了以后创建项目更快捷，你可以把这个项目的架构压缩保存起来。
项目结构与上一节的 vue-cli-demo1 基本一致，主要就是多了几个配置文件：
.browserslistrc——适用的浏览器配置
babel.config.js——babel 配置文件
.eslintrc.js——eslint 配置文件
在上一个项目中，这 3 种配置实际上都是存放在 package.json文件中。

四、CLI 服务命令的使用

4.1、CLI 服务介绍

CLI 服务 ( @vue/cli-service ) 是一个开发环境依赖。局部安
装在每个@vue/cli 创建的项目中。查看 package.json 文件如下：可以看到确实开发环境依赖安装了@vue/cli-service。CLI 服务实际上是对webpack和 webpack-dev-server的封装。
在 一 个 Vue CLI 项 目 中 ， @vue/cli-service 安 装 了 一 个 名为 vue-cli-service 的命令。提供了 serve、build、lint 和 inspect命令。在 package.json 文件中可以看到，如下图所示默认有 3 个。

4.2、CLI 命令使用

（ 1 ） serve 启 动 一 个 开 发 环 境 服 务 器 ( 基 于
webpack-dev-server)，修改组件代码后，会自动热模块替换。——可以测试下，比如修改下 Home.vue 内容

（2）build 用于构建/打包项目的，构建之后会在根目录下自动创建一个 dist/ 目录，打包后的文件都在其中。
在终端输入 npm run build。
打包后：
第一、单文件组件打包后会自动生成后缀为 .js 和 .map 的文
件。
js 文件: 是经过压缩加密的，如果运行时报错，输出的错误信息无法准确定位到哪里的代码报错。
map 文件：文件比较大， 代码未加密，可以准确的输出是哪一行哪一列有错。
第二、打包后 public 文件夹下的文件会以原来的文件名直接放
到 dist 目录下。其中 index.html 文件会进行压缩。查看下该
index.html 文件中可以看到引用的组件是压缩加密后的 js 文件。那么.map 的文件可不可以不要让它打包生成，以加快打包速度，——可以，后面讲。
第三、原 src/assets 下的文件打包后文件名重新更改了
第四、打包后的 dist/css 文件来自于哪里呢？——来自于
App.vue 中的样式。

（3）lint 使用 Eslint 进行检查并修复代码，使其规范
比如: 将 main.js 中的 new Vue 中间多加个几个空格等，然后保存 ，再在终端执行 npm run lint 后它会自动的去除多余空格 。 ——测试下。
（4）inspect 命令
可以使用 vue-cli-service inspect 来查看一个 Vue CLI 项目
的 webpack config。首先在 package.json 中映射好该命令别名，如下图所示
接 下 来 在 终 端 输 入 npm run inspect ， 即 可 在 终 端 看 到webpack 的底层配置。（内容比较多。）

4.3、CLI 脚手架创建的项目基本结构归纳解析

|-- node_modules: 存放下载的依赖的文件夹
|-- public: 存放静态文件的文件夹，它与 src/assets 的区别在于，public 目录中的文件打包只会简单处理，文件名不会改变
	|-- index.html:入口文件（单页面项目唯一的一个 html，前面章节的项目都是在根目录下），只会压缩后再复制到 dist 目录下，其余不变
	|-- favicon.ico: 在浏览器标题栏显示的图标 ，会原样复制到 dist 目录下
|-- src: 源码文件夹（项目核心文件）
	|-- assets: 存放组件中的静态资源 ，如图片
	|-- components: 存放一些公共组件
	|--router
		|--index.js 存放路由配置
	|-- views: 存放路由组件的文件夹
|-- App.vue: 根组件【其他组件一般通过这里引入】
|-- main.js: 应用入口 js 【App.vue 在这里引入】
|-- .browserslistrc: 指定了项目可兼容的目标浏览器范围, 对应是package.json 的 browserslist 选
|-- .eslintrc.js: eslint 相关配置
|-- .gitignore: git 上传到 git 仓库要忽略的文件的配置, 打开看看，如node_modules、/dist 就一般不上传到 git
|-- babel.confifig.js: babel 的配置,即 ES6 语法编译配置
|-- package-lock.json: 用于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他人在 npm install 项目时下载的依赖能保证一致
|-- package.json: 项目基本信息,包依赖配置信息等
|-- README.md: 项目描述说明的 readme 文件
|-- postcss.config.js: postcss 一种对 css 编译的工具，类似 babel 对 js 的处理
|-- dist: 打包后的目录
	|--css：源文件中的 css 样式打包后存放文件夹
	|--img：源文件中静态图片文件存放文件夹，一般是 src/ 	assets 文件夹的
	|--js：源文件中各种组件打包后的 js 文件，源文件大会进行拆分，其中chunk-vendors 一般是你引用的第三方库的代码

src 文件夹下的文件打包处理后文件名都会改变，文件名后面会加一个 hash值，其作用就是浏览器能够及时更新显示，因为浏览器有缓存功能，如果文件名不改变，打包后浏览时会依然使用缓存中的资源，这样显示内容得不到及时更新，而 public 文件夹下的 2 个文件实际上很少去改变，所以默认不会去改变这个文件夹的文件名称

五、通过 vue.config.js 自定义配置

其他选项配置参考官网：
https://cli.vuejs.org/zh/config/#vue-config-js

5.1、vue.config.js 是什么

前面讲完的 2 个项目都是采用 vue-cli 默认的一些配置，如果以上配置不能满足需求，还可以自己配置。怎么配置呢？
在前面项目 vue-cli-demo2 根文件夹下创建 vue.config.js 文件。
vue.config.js 是 一 个 可 选 的 配 置 文 件 ， 如 果 项 目 的
(和 package.json 同级的) 根目录中存在这个文件，那么它会
被 @vue/cli-service 自动加载
这个文件要导出一个包含了选项的对象：即首先写入如下代码：// vue.config.js
module.exports = {
// 选项… }

5.2、配置 vue.config.js 中的选项

5.2.1、devServer

devServer: {
port: 8888, // 端口号，如果端口被占用，会自动加 1 。可以输入 npm run serve
进行测试看下
open: true, // 启动服务自动打开浏览器
https: false, // 协议
host: "localhost", // 主机名，也可以 127.0.0.

5.2.2、lintOnSave

lintOnSave: false, // 关闭格式检查。默认 true, 当不符合 eslint语法规则时
//会给出警告提示。警告仅仅会被输出到命令行，且不会使得编译失败。

测试，先运行 npm run serve
然后，比如修改下 main.js，把该有的空格去掉，保存下，就会给出警告提示，当然你改回来，保存下就会成功编译下去。如果不想让它出现警告提示（因为后续可以通过执行 npm run lint 一次性解决这个格式问题），那么就可以把 lintOnSave 设置为 false。再重新测试，需要先停止运行，然后再执行 npm run serve，最后再修改下 main.js 文件，去掉些该有的空格，再保存，发现会成功编译，不会给出警告。

5.2.3、outputDir

outputDir: "dist2", //设置存放打包文件的目录，默认是 dist 。

测试，先停止原来再运行项目。然后执行 npm run build 重新构建打包。执行后你会发现这个时候打包在 dist2 目录下了。

5.2.4、assetsDir

assetsDir: "assets", //存放打包生成的静态资源 (js、css
//、img、fonts) 的 (相对于 outputDir) 目录

5.2.5、indexPath

indexPath: "out/index.html", //指定生成的 index.html 的输出路径 
//(相对于 outputDir)。默认值是 index.html,即在 outputDir根目录下。

测试，先停止原来再运行项目。然后执行 npm run build 重新构建打包。执行后你会发现这个时候打包在 dist2 目录下了

5.2.6、productionSourceMap

productionSourceMap: false, // 打包时, 不生成 .map 文件, 加快打包构建。

六、Eslint 插件语法规则和配置

6.1、Eslint 是什么

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
如果开启了 Eslint , 要严格按照其设置的语法，包括空格不能少或多，必须单引不能双引，语句后不可以写分号等等，这些规则其实是可以设置的。
如果是前端的初学者，最好先关闭这种校验，否则会浪费很多时间在语法的规范性检查上。如果以后做真正的企业级开发，建议开启。Vue-Cli 中默认是开启的。

6.2、Eslint 配置

在项目根目录下的 package.json 文件（vue-cli-demo1）中
有 eslintConfig 选 项 中 配 置 , 或 者 .eslintrc.js 文 件
（vue-cli-demo2）中单独配置。
eslintrc.js 文件默认内容如下:

module.exports = {
root: true, // 用来告诉 eslint 找当前配置文件
env: {// 指定你想启用的环境，下面的配置指定为 node 环境
node: true
},extends: [ "plugin:vue/essential", // 格式化代码插件
"eslint:recommended", "@vue/prettier"],// 启用推荐规则
parserOptions: {
parser: "babel-eslint" //用来指定 eslint 解析器
},rules: {//配置检查规则
// 是否在控制台输出（即是否启用 console.log）
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // 是否是 debug 方式
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};

6.3、自定义 Eslint 语法规则

参见官网：https://cn.eslint.org/docs/rules/
语法规则写在 package.json 或 .eslintrc.js 文件中 rules 选项中, 语法如下:
rules:{ “规则名”: [错误等级值, 规则配置]}

（1）错误等级值: “off” 或者 0 // 关闭规则
“warn” 或者 1 // 打开规则，作为警告（信息打印黄色字体） “error” 或者 2 // 打开规则，作为错误（信息打印红色字体），错误级别会导致运行启动不起来。
（2）规则名
参见官网：https://cn.eslint.org/docs/rules/

6.4、按规则自动修复代码

执行下面命令会根据 Eslint 定义的语法规则进行检查，并按语法规则进行自动修复项目中不合规的代码。
npm run lint //最主要是处理一些空

七、在脚手架项目中引入 axios 发送 ajax请求

7.1、安装 axios

npm install axios -S

7.2、axios 的使用方式一

第 1 种 axios 使用方式——在需要使用 axios 发送 ajax 请求的组件中导入 axios。
在 App.vuee 中要发送 ajax 请求：

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
<hr>
<button @click="send">发送 ajax 请求</button>
</div>
</template>
<script>
import axios from 'axios' //插件名就是 axios，引入之后的名字也设置为axios
export default {
methods:{
send(){
axios.get('https://api.github.com/users/xuzhaoxing2020')
.then(resp=>{
console.log(resp.data)
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss"> ……
</style>

结果：

现在假设我在 About.vue 组件中也要发送 ajax 请求。也需要引入 axios，然后再去使用，这样感觉引入 axios 有点雷同。因此可以采用第 2 种引入 axios 方式

About.vue:

<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="send">about 页面发送 ajax 请求</button>
</div>
</template>
<script>
import axios from 'axios' //插件名就是 axios，引入之后的名字也设置为 axios
export default {
methods:{
send(){
axios.get('https://api.github.com/users/xuzhaoxing2020')
.then(resp=>{
console.log(resp.data)
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>

7.3、axios 的使用方式二

第 2 种 axios 使用方式——在入口文件 main.js 全局引入 axios，做到一次引入多处使用

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import axios from 'axios' Vue.config.productionTip = false;
new Vue({
router, render:h => h(App)
}).$mount("#app");

然后在各个组件中就可以直接去使用吗？测试看下，把 App.vue中导入的 axios 删除或注释掉，然后去看运行效果。发现不行会报错。提示 axios 没有定义。
因此，第 2 种方式是在入口文件 main.js 全局引入 axios 并要把axios 添加到 vue 的原型中。

main.js 中代码就改为如下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import axios from 'axios' Vue.config.productionTip = false;
//通过 Vue.prototype 为 Vue 添加一个方法，方法名自己命名
Vue.prototype.$http=axios;//$http 名字是自已任意取的方法名（一般取名为$http,与 vue-resource 中发送请求名称保持一致），有这句话之后，Vue 里面就有了$http 方法，它实际就是 axios
new Vue({
router, render:h => h(App)
}).$mount("#app");

因此在发送 ajax 请求时原来的 axios.get 就可以改
为 this.$http.get（this.$http 实际指的就是 axios）即可。

App.vue 代码如下：

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
<hr>
<button @click="send">发送 ajax 请求</button>
</div>
</template>
<script>
//import axios from 'axios' //插件名就是 axios，引入之后的名字也设置为
axios
export default {
methods:{
send(){
this.$http.get ('https://api.github.com/users/xuzhaoxing2020')
.then(resp=>{
console.log(resp.data)
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss"> ……
</style>

About.vue:

<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="send">about 页面发送 ajax 请求</button>
</div>
</template>
<script>
//import axios from 'axios' //插件名就是 axios，引入之后的名字也设置为 axios
export default {
methods:{
send(){
this.$http.get('https://api.github.com/users/xuzhaoxing202
0')
.then(resp=>{
console.log(resp.data)
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>

在其他组件中要使用 axios 发送 ajax 请求，也只需要使用
this.$http.get（）即可。

💕$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐ $收藏，你的青睐是我努力的方向！$

🥕 $评论，你的意见是我进步的财富！$