Vue学习笔记 day6

[imyanglan]

Vue CLI详解

学习地址：(https://www.bilibili.com/video/av59594689?p=90)

Vue CLI

• 什么是Vue CLI

如果你只是简单写几个Vue的Demo程序，那么就不需要用到Veu CLI。但如果，你在开发大型项目，你就必然需要使用到Vue CLI。

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思？

CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。 Vue CLI是一个官方发布的vue.js项目脚手架。 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

为什么这个要叫脚手架，脚手架这一词是建筑上的一个概念，就是在盖一个建筑时，先搭建好一个大概的结构然后才能来进一步的来建这个楼。

• Vue CLI使用前提 - Node（依赖环境）

为什么Vue CLI使用要依赖Node？因为Vue CLI会生成webpack的配置，而webpack的使用环境需要依赖于Node。

安装NodeJS

可以直接在官网中下载安装

检测安装版本

默认情况下自动安装Node和NPM，Node环境要求8.9以上或者更高版本。

在命令行里输入 node -v 查看当前版本

什么是NPM？

NPM的全称是Node Packge Manager 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准 后续我们会经常使用NPM来安装一些开发过程中的依赖包

cnpm安装

由于国内直接使用npm的官方镜像是非常慢的，这里推荐使用淘宝NPM镜像。你可以使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用cnpm命令来安装模块了：

cnpm install [name]

• Vue CLI使用前提 - Webpack

Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发过程中提供了一套完整的功能，能够使我们开发过程中变得高效。

webpack的全局安装

npm install webpack -g

• Vue CLI的安装

  安装Vue脚手架

可以通过官网来查看如何安装脚手架

npm install -g @vue/cli

一般情况下我们不用安装到本地，我们可以直接全局安装

如果发现脚手架安装不成功的情况，可以试试去本地目录里将之前安装脚手架时的数据删除再安装，目录路径C:\Users\Administrator\AppData\Roaming\npm-cache 这是介于使用 npm clean cache -force 不成功的情况下使用的

-g globa：全局

从脚手架3开始都通过@vue/cli这种方式来安装的，在这之前是直接写给vue。我们在这里直接安装脚手架3，如果我们要使用脚手架2可以直接抽一个模板下来而不用再安装一个脚手架2。

如果需要按照Vue CLI2的方式初始化项目是不可以的，我们只能通过一个命令来拉取2的模板，这也能从官方网站上找到相应的命令。

我们通过第一行命令在全局安装了一个桥接工具，然后就可以通过下面的代码初始化一个Vue CLI2的项目

vue init webpack my-project

当我们这样写，它就会在我们的my-project项目里生成我们脚手架2所需要的webpack的配置，这行代码要在我们项目的目录下写。

而初始化一个Vue CLI3的项目则是这样写

vue create my-project

这之后会说

Vue CLI2的使用

接下来我们从初始化一个Vue CLI2的项目开始来讲

• Vue CLI2配置过程

我们在我们目录里先安装Vue CLI2

这里的01-vuecli2test是文件夹的名字

然后下面就看开始设置一些我们项目的选项

Project name：项目名称

Project descriiption：项目的描述信息

Author：作者（全局的.gitconfig里配置了，会自动获取）

Vue build：用什么构建项目

它提供了两种选择： Runtime + Compiler：对于大多数用户推荐这个。 Runtime-only：以后用的更多的是这个，因为它比上面的要小，而且更高效。 以后详细解释这两个的区别，现在暂时选第一个。

Install vue-router：是否要安装路由（暂时还没学到路由先不安装）

Use ESLint to lint your code：是否使用ESLint，对js

代码对它进行一些规范限制，如果写的不规范编译器会报错。

Lint：限制 ES：js代码
选择yes的话后面还会出现两种规范给你选

Pick an ESLint preset：选择规范（如果上面那个选项是yes才会出现这个选项）

Standard ESLink的标准规范（我们这里暂时选择这个标准的） Aribnb 爱彼迎公司的规范 none (configure it yourself) 可以写个自己的规范

Set up unit tests：单元测试（这里不重点讲，这还依赖第三方测试框架，用的比较少）

Setup e2e tests with Nightwatch：它想让你依赖Nightwatch这个东西进行端到端测试，它会写一个自动化测试的框架的。

e2e：end to end 端到端测试
Nightwatch -> selenlum（结合这个可以直接写出来一套端到端测试的代码，这样整个项目可以在浏览器上进行一些自动化测试） selenlum这个东西可以自动操作浏览器，用来写一些自动化的测试

Should we run 'npm install' for you after the project has been created?(recommended)：你准备以后管理这个项目准备用我们的NPM还是Yarn（管理工具）

Yes,use` NPM（选择NPM） Yes,use Yarn No,I will handle that myself

然后就会根据我们初始化Vue CLI2项目的选择来创建这个项目

就会生成这一堆东西

• Vue CLI2目录结构

接下来我们就对这些文件做一些解释

首先我们如图打开这两个文件夹

这些文件的目的就是用来配置

这三个文件的命名是不是很眼熟，就是我们之前在webpack在配置公共配置和开发时使用的配置和打包时使用的配置分离的时候使用过这个命名。

由此可知，build和config文件夹都是用来存放一些项目中关于webpack的配置的

因为我们现在要运行这个项目的话肯定会执行npm run build或者是 npm run dev会以类似这样的方式来运行，所以我们应该从package.json里面开始找，这两个命令的设置。

lint：用来对代码做限制的

我们来看我们的build命令，如果我们现在执行npm run build它会打包我们的项目，它就去执行了builid文件夹里的build.js

它通过node指令去执行这个js文件

node是可以直接执行js文件的！

以前的js为了运行必须得嵌套在html里面，然后到浏览器上才能运行，js的运行是依赖于浏览器的。后来有了我们的node它为js提供了运行环境，node是使用C++开发的，它里面有个核心的东西V8引擎。V8引擎是谷歌公司开发的，默认情况下js代码要想运行会生成一个字节码，再将字节码跑在浏览器上，让浏览器的引擎对它做解析。V8引擎就跳过了这一步，直接将js代码编译成了二进制代码，所以它运行效率很高。（这就是为什么说谷歌浏览器比别人快）node用C++，并且借助V8引擎，为我们在浏览器上执行js代码做了一层底层的支撑，我们有了node，就能直接使用它来执行某一个js文件了。

前面的const都是引入我们可以先不看，程序是从rm开始运行的。rm是remove的缩写，它是要执行我们的命令去删除我们原来打包过的dist文件夹，如果我们不是第一次执行npm run build 它会将我们之前执行打包的文件删除掉。

然后再从这里执行我们的 webpack ，找我们webpackConfig相关的配置，通过这个配置对它进行打包，这个配置就是在上面引入的文件。

这个文件中的配置就像之前webpack中使用npm run build 时使用特殊配置时还引用基础配置的语法。

如果对于特殊配置中的插件有疑问可以直接去网上搜，这个插件的用来做什么的。

我们再来看我们的开发dev

它通过webpack-dev-server来搭建一个我们的本地服务器，--progress是我们的打包进度的打印信息。--config通过这个指定我们在运行哪个js文件。

而build文件中其他的js文件，比如说下面的这些

都是为里面的这些配置做服务的

而config文件夹里面的js文件配置了很多基础的变量

在后面可能会用到这些变量

再往下面看我们就能看到我们的一个当前项目依赖的node的包都放在这个文件夹里了

我们依赖哪些呢？

devDependencies：开发时依赖 dependencies：运行时依赖

下面这个就是我们用来开发的文件夹

以后做开发就是从这个文件里写代码

static文件夹一般会存放我们静态的资源

如果我们在这里面放一些东西他会原封不动的复制到dist文件夹中

它里面还有一个gitkeep文件

因为git的话如果某些文件夹为空它可能不会把这个git上传到服务器，但是我们加了这个，不管文件夹为不为空都会上传到服务器。

现在来到我们的文件

它的作用就是把我们的ES6转成ES5，让更多的浏览器进行适配（在ES进行转化的时候读取的配置文件）

而它现在适配浏览器只需适配如下

它的市场份额大于1%的，并且是它最后的两个版本，最后是ie小于等于8就不用考虑了。

"stage-2" 这是代表js的阶段，意思就是现在要转换的那些代码只针对于这个阶段进行转化。（这里是2的原因是因为脚手架给package.json里安装配置的就是这个）

plugins:插件，表示它在转化的过程当中还依赖数组里的那两种插件。

它告诉我们哪些浏览器需要适配，通过这种方式对我们的转化做一些限制

.editorconfig对我们的代码做一些统一

这个就是用来规范我们的代码的，我们来看看它里面的东西有什么作用

在公司比较正规的情况下，项目的目录里一般都有这个文件，对我们的代码做一些约束。

我们在之后写代码的时候有些地方代码不是特别规范的话，我们可能想对它做一些忽略，这时我们就要用到

它里面写的就是需要忽略的文件夹，和文件

下面也有一个gitignore

它是用来做什么的？ 当你向服务器上传一些东西的时候，有些东西是不需要上传到服务器

安装完这个eslintrc，它就会对我们的代码进行检测

这些就是我们之后的代码检测配置的一些相关东西

这个postcssrc是针对于css转化的一个东西

在进行我们css转化的时候配置的一个东西，暂时这些东西不需要我们手动去更改配置

而这个index.html就是我们的模板

当它打包时会根据我们的这个模板去创建我们对应的index.html并且打包到build文件夹里

package.json用于管理我们node包里面的东西

而且里面还有很多信息的管理

而当我们在安装的时候，安装的可能并不是我们指定的那个版本。 当我们在安装的版本前加上^这个符号，如"^6.22.1"它的意思就是我们最后的那个数会变，也就是说如果找不到这个版本会往更高的版本安装。而如果是~那么最后和中间的数会变也是往高版本安装，第一个数是不会变的。

这个时候就可能出现我们在这个配置里写的版本和安装的版本并不一样，这时候就需要有一个这两个之间的映射关系。

而这个映射就在我们的package-lock.json里面

一般lock里面记录的都是我们正式安装的版本，就是通过这个来记录我们node里安装的真实的版本

最后就是我们的README

如果我们做一些开源项目一般都会有这个，可以在里面写一些文档相关的东西。

• 入口文件详解

在讲解入口文件的同时，我们还要对比一下选择runtimecompiler和runtime-only的区别

所以，我们得在创建一个使用runtime-only的项目

我在runtimecompiler里安装了ESlint，而在runtimeonly里没有安装，这样我们也能对比ESlint能做什么事情。

打开02-runtimecompiler的目录结构，我们进入这个程序的入口文件里

我们发现，它引用了Vue，因为我们在安装脚手架的时候，就已经帮我们一起安装好了。我们可以来到package.json里查看配置，发现已经帮我们安装好了Vue，并不需要我们自己去引用。

dependencies：运行时依赖

所以我们的入口文件main.js通过导入Vue然后在下面创建Vue实例，在Vue实例中挂载我们index.html里面的id=app的div，然后注册了我们的App组件将我们挂载的app替换掉。而被注册的App组件就是同级目录里面的App.vue，由引入的路径就可判断出来。

而App组件里面又引入了另一个组件

这就和我们之间模块化的时候创建的组件间的关系的引用一样

我在runtimecompiler里安装了ESlint，它是用来规范代码的，它会对所有的代码进行检测。如果我们不按照它的规范书写代码，当我们保存的时候程序就会出现报错，从而不能运行。

例如我在main函数里的template后面加一个逗号没加参数，当我保存时会出现

它会出现报错提示，且告诉我们哪里有错误，这里就是因为我们在后面多加了个逗号但并没有给参数，而这个代码规范就是后面参数不能再在后面加逗号。

而我们去掉那个逗号按下保存就能编译成功了，正常编译的话会是这样的信息，并且给我们一个地址。

所以ESlint做的就是，让我们的代码不能有任何不规范的地方

但是这个规范有时候反而会影响你平常写代码的习惯，而且有些规范也不是特别标准。

所以，如果当你不想用这个ESlint，你可以直接将它关掉。

然后将程序关掉重新运行一遍就行了

现在再说说我们runtimecompiler和runtime-only的区别

我们把02-runtimecompiler和03-runtimeonly中的main.js拿出来对比

由图可知： runtimecompiler在用我们的App的时候是先在components里面做一个注册，注册完了在template里面使用这个组件。 runtimeonly用了一个render的属性，里面写的是一个箭头函数，是这样来做的 render：function（h）{ return h(App) }

Vue渲染过程 当我们把template给我们的Vue实例传进去的话，它就会在我们的vm.options里面做一个保存，当我们保存完了，它就会做第二件事情。就是将这个templa进行一个parse（解析），解析成ast（抽象语法树 abstract syntax tree）。之后第三步会进行一个compiler（编译），将这个编译成一个render函数，然后通过我们的render函数把我们的template最终翻译成一个virtual dom(（虚拟 dom），最后将虚拟dom树渲染成真实dom也就是显示在我们的UI上的一些东西。

所以上面两个的区别是:

runtime-compile：template-> ast -> render -> virtual dom -> 真实 DOM (UI)
runtime-only：render -> virtual dom -> UI

所以runtime-only的性能更高，代码量更少。（所以以后开发可以尽量选择runtime-only）

render函数的使用

刚刚我们上面写了关于render函数后面的h => h(App) 解析如下：

render：function（h）{
  return h(App)
}

但这里面的h其实是一个内部的函数createElement将h传给了我们，这里的h函数是Vue基于vdom自己封装的函数，用于把vdom转换成dom节点 h（'<标签名>'，{...属性...}，{...子元素...}）

而这个函数也有很多用法，如下

普通用法

传入组件对象

先在上面创建一个组件对象

然后引用

因为App也是组件所以也能用这种方式来引用

这样看起来两个main.js里面的代码就完全一样了

最主要的原因就是我们的render函数，通过我们的createElement这个函数可以直接传入一个组件。

但在我们的组件App里，不是还有template吗，难道不需要经过template ->ast ->render ->vdom -UI这个步骤吗？ 不需要！ 因为App里的template最终被编译出来的就是一个普通的对象，而在这个普通的对象里面，它已经将template全部渲染成了render函数了。最终我们拿到的App对象里面是没有template这个东西的。

为了验证我们可以直接将这个App打印输出

我们可以看到我们在打印第6行打印的

我们展开来看它里面没有template，但有render。这个render就是将我们的template编译成的render函数

那么.vue文件中的template是由谁处理的呢？

是由vue-template-compiler将我们的.vue文件里面的template给它解析成render函数的。所以当我们引用App这个组件的时候，我们引用的不是App.vue这个文件，而是它被解析后的对象，而这个对象里没有包含任何的template信息，它里面的template都已经转成了render函数了。

所以最后在我们运行使用vue的时候，就没必要使用runtime-compiler，因为里面都不包含template，用的都是render函数，所以我们最终用的都是runtime-only就可以了。

简单总结： 如果在之后的开发中，你依然使用templa进行开发，就要选择Runtime-Compiler。 如果在之后的开发中，使用的是.Vue文件开发，那么就可以选择Runtime-only开发。

Vue CLI3的使用

vue-cli 3 与 2 版本有很大的区别

vue-cli 3 是基于webpack4 打造，vue-cli 是 webpack 3 vue-cli 3 的设计原则是 “0配置” ，移除配置文件根目录下的，build和config等目录 vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化 移除了static文件夹，新增了publi文件夹，并且index.html移动到publi中

• Vue CLI3配置过程

初始化Vue CLI3项目

vue create 项目名称

这和初始化Vue CLI2不一样

首先我们先初始化一个Vue CLI3项目

它下面英文意思是您到默认npm注册表的连接似乎很慢，问我要不要切换到淘宝镜像的地址进行下载，我们选择同意。

因为现在的最新版本已经更新到Vue CLI 4.1.2了所有我们拿这个来作为3进行演示

首先它会让你选择一个配置

default：默认的配置 Manually select feature 手动的选择特性

prestet：配置

我们选择手动的，然后可以在这里进行选择

Babel（现在暂时只选这一个）

TypeScript

Progressive Web App (PWA) Support （如果开发App这个比以前的要更加先进，因为它里面增加了很多功能）

Progressive：进步/先进

Router 路由

Vuex

CSS Pre-processors CSS预处理器

Linter/Formatter(这个就是ESlint，我们这暂时不用这个，取消它的选择) 对代码做检测

Unit Testing 单元测试

E2E Testing 端到端测试

用空格来进行选中，当选择完毕敲回车

然后，它就会问你

你打算把你的一些配置文件是准备

In dedicated config files (放在专用的配置中) 选择这个 In package.json (还是放到package.json里)

然后我们进行下一步

你要不要把你刚才的选择保存一个preset，如果保存的话，这样当我们下次选择的时候它就会在第一步出现三个选项，第三个选项就是我们这次保存的这个。

然后它就问你保存一个什么样的名字

然后按回车它就开始创建了

而我们在这里再创建时就能看见我们刚刚保存的选项

如果我们想删除掉这个设置要怎么做呢？ 在我们的C:\Users\Administrator这个路径里找到我们的vuerc

然后把这个里面的我选中的东西删除就行了

我们一些工具生成的全局文件，一般都会保存在这个目录下面，而这些在终端命令里面运行的配置后面都是以rc结尾 rc ->run command(运行终端)

• Vue CLI3目录结构

我们现在来看我们脚手架3创建的目录结构

我们发现太比脚手架2简洁很多，少了很多东西。而多了一个public文件夹，这个public文件夹就相当于以前的static文件夹，如果我们有什么文件需要它直接原封不动的复制到dist文件夹里就可以放在这里面。

.browserslistrc是配置浏览器相关的东西

.gitignore是用来忽略一些不想上传到服务器的文件的

babel.config.js内部会用来读取一些配置，用来配置babel相关的东西，用于ES语法转换

之后就是我们的package.json，我们会发现比起脚手架2它又少了很多的东西

因为它通过 "@vue/cli-service"这个工具，间接的帮我们管理了很多包

之前说过这两个的作用这里就不再说了

如果我们要在这里将这个项目跑起来，请参考package.json里的配置

我们要使用

npm run serve

因为我们安装了 "@vue/cli-service"`这个工具，它间接的帮我们去管理了，它去帮我们执行对应的配置。

我们再打开我们的src文件夹查看里面的入口文件

production：产品的 Tip：提示

Vue.config.productionTip = false 这句话的意思是，当我们在构建一个项目的时候，需要显示一些提示信息，直接npm run build 的时候它会给你一些提示信息。在开发阶段nom run serve的时候是不需要这些提示信息的所以这里现在是false。

与之前的脚手架2比又有不同，我们发现Vue里面用于挂载的el不见了，而后面多了一个.$mount( ' #app ' )。其实这两个东西没区别，当你把这两个东西传进去，它内部还是执行.$mount( ' #app ' )。也就是说如果你有el这个属性，它内部会帮你执行.$mount( ' #app ' )这个东西，如果你这里直接写了，它内部就不会帮你挂载了。

• Vue CLI配置修改

当我们使用脚手架3的时候发现之前的那些一大堆配置都不见了，那都去哪里了呢？我们又要怎样修改我们的配置呢？

在脚手架3里面如果要想修改配置的话，可以通过三种方案

Vue UI

第一种方案：启动一个本地的服务vue ui

当我们在前面安装脚手架的时候

npm install @vue/cli -g

它安装的这个vue里面不仅能通过vue init 创建项目，vue create 创建项目，还能通过vue ui 启动一个本地服务，然后就可以在这个本地服务里去管理我们的很多项目。我们可以随便在终端的任何位置敲这vue ui个启动本地服务

我们在终端启动我们的vue ui

里面的GUI就是我们的用户界面，我们就会发现运行了vue u之后会启动一个界面

其实这个界面也是跑在一个本地服务上的，端口是8000，我们只需通过浏览器打开对应的服务就会对应出现到图上所示。

然后我们可以去查看这个项目安装的插件

/img/06/04.png?raw=true())

这些插件就是我们package.json里的看到的这些配置

####### 如果我们仔细看，发现真正安装的版本和我们配置里的版本有点不一样！配置里4.1.0而安装的是4.1.2这是为什么呢？

我们打开node_modules文件夹，找到在它下面的vue文件夹，打开它里面的package.json。就可以看到一些配置，而我们可以看到这些配置的版本号前面有些有个^这样的箭头。

这在我们之前也解释过，因为配置里还在版本前面加上了^这个符号，所以它真正安装的是以4.1.X这个范围为准的，如果没找到这个版本它会往高版本去找然后再进行安装的，所以一旦带了符号的基本上安装的就不一定是确切的版本而是一个模糊的版本。而你想要知道我们安装的到底是哪个版本有两种方式。

第一种：

第二种：

注：我们从图中会看到有带dev的是开发阶段的版本，没有参考价值

如果你看到版本号后面有beta，那就是测试中的版本，很不稳定。

如果你想在开发中安装一些插件或依赖你可以在这里选择

然后我们可以分别选择运行时依赖和开发时依赖的插件进行安装

这就叫图形化界面管理

然后下面的配置就是一些关于webpack相关的配置

如果不清楚配置是用来做什么的可以去搜一搜，一般情况下这些配置都不需要改的

Base URL：就是在dist文件夹里再添加一些别的目录，往这里面放其他的一些资源

输出目录：就是将项目打包输出到dist文件夹里

资源目录：就是用来存静态资源的文件夹

启动运行时编译：这就是之前说的runtime-complier和runtime-only，这里做成了一个按钮来选择这两种模式

Enable Production Source Maps：它会生成一个.map的文件，是用于我们之后调试代码用的

并行编译：要不要加入bable或typescript

启用 CSS Modules：它默认情况下只帮你编译css文件，如果想用其他文件就要将这个打开，并且选择你要用什么样的文件

配置存放路径

在脚手架2里有两个文件夹专门用来存放一些配置文件而脚手架3里却没有这两个文件了，其实它是被隐藏了起来，如果我们想找到这些配置该去哪找呢？

打开我们的node_modules

再打开我们的@vue

在这里面找到我们的webpack.config.js的配置

由这里面的代码可得，有一个文件的导入，当前文件夹下面的lib文件夹里面的Service

在这个Service里面就有很多的配置

所以它是将配置隐藏在这里了。而且在lib这个文件夹里还有一些文件夹就放了一些具体配置，之前在脚手架2里看见的配置就被隐藏到这个位置了。而它隐藏起来的目的就是因为，脚手架3的设计原则就是“0配置”，它不希望我们随便看到这些配置信息，所以将这些信息隐藏了起来。

添加新的别名

自定义配置文件

如果你对当前的默认配置不满意想修改一下这些配置该怎么做？

我们需要在当前的目录下面，创建一个文件，而且名字是固定的不能随便改。

在这个文件里面通过module.exports给它导出你想要的一些配置，然后它会把你写的这个配置和之前的一大堆的配置自动进行一个合并的，合并之后作为我们webpack整体的一个配置。所以如果有配置需要改就创建这个文件夹，而且名字还不能随便改。

之后我们有自己独有的需求和配置就需要在这里进行配置