vue的学习笔记（11）之vue cli详解

前面通过webpack配置一些属性，但是在真实的项目开发中，我们是不会从头到尾自己手动写一些配置的。不管是通过vue进行开发，还是react进行开发，他们均有对应的脚手架的，我们可以通过对应的脚手架进行自动配置。

1、Vue CLI

(1) 什么是Vue CLI

• 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。
• 如果你在开发大型项目, 那么你需要使用Vue CLI。
• 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来自动生成一些配置（比如代码目录结构、项目结构等），来帮助开发者完成与配置有关的事情。
• 而且我们自己写配置的时候，配置不一定是最好的。在开发大型项目的时候，显然效率低下，你还要去学各种配置信息。

CLI是什么意思?

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

脚手架是什么?其实就是类似于建筑时候外围搭载的脚手架。

(2) Vue CLI使用前提 - Node

使用VUE CLI必然要依赖node环境，因此需要以下操作。

• 安装NodeJS
  • 可以直接在官方网站中下载安装：网址: http://nodejs.cn/download/
• 检测安装的版本
  • 默认情况下自动安装Node和NPM。
  • Node环境要求8.9以上或者更高版本。
• 什么是NPM呢?
  • NPM的全称是Node Package Manager是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包。

小贴士
cnpm安装：由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]

(3) Vue CLI使用前提 - Webpack

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

Webpack的全局安装:npm install webpack -g

这部分知识前面讲过。

(4) Vue CLI的使用

• 第一步安装Vue脚手架（一般全局安装就行）:npm install -g @vue/cli

• 注意：如果通过上面的命令安装的时候，安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。我们可以在vue CLI3上面拉个模板就可以使用vuecli2。（官网做法：https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC）

• 若安装脚手架的时候出现错误，执行一下npm clean cache --force
  （或者直接到C:\Users\12925\AppData\Roaming删除npm-cache文件夹）
  

• 第二步安装完毕后，可通过vue的相关指令，看看是否安装成功
  
  小贴士
  在前面的安装中，如果你是使用npm install -g @vue/cli安装Vue脚手架的话，安装的是vuecli2版本的，如要你在学习的过程中，需要使用vuecli2，我们需要在vuecli3的基础上拉取vuecli2的模板。

• 第三步使用Vue CLI2初始化项目：vue init webpack my-project

  • 执行完这条指令后，在就会在我们的项目内自动生成webpack的相关配置文件到my-project里面。

配置后项目中有一系列的文件

• 或者使用Vue CLI3初始化项目：vue create my-project

2、Vue CLI2

(1) 目录结构详解

使用Vue CLI2初始化项目后，会生成一系列的文件，这些文件是什么？

(2) Runtime-Compiler和Runtime-only的区别

在利用vuecli2开发项目的时候，有这一步骤：

他会有以下两个选项：

认识Runtime-Compiler和Runtime-only的区别前插一下eslint的规范：
①先在本项目的文件下，执行vue init webpack runtimecompiler初始化项目

该情况下，选第一个。

②在通过vue init webpack runtimeonly初始化项目。（目的后面看看两者的区别）该情况下选第二个。

然后会有两个文件。

③npm run dev一下，可以看到是这个页面。

这是他默认的一个页面。可以通过入口文件（main.js）去看相应的代码就知道了。

小贴士
如果执行npm run dev有错误，应该是开启了eslint检错，根据提示的错误规范化代码即可。获取直接把eslint改为false。（在config/index.js文件里面）

接下来正是进入 Runtime-Compiler和Runtime-only的区别：
先来看看两种方式，产生的main.js有什么不同。

其次：
①runtimecompiler通过注册使用，是需要template模板的，那么他的过程是：template -> ast -> render -> vdom -> UI(真实DOM)
②runtimeonly：render->vdom->UI

来个测试，我们可以看到有两个选项，他有对这两个方式的描述：

小贴士

• runtimeonly的优点：性能高，代码量少
• 其实通过runtimecompiler创建的项目，main.js里面创建vue实例中的template等价于render。他会将createElement里面的内容替换掉挂载app的标签的里面的内容

进行npm run dev后：

还能这么写：


也可传入组件：

其实用render函数代替的话就等价于用vue init webpack runtimeonly效果一样。

简单总结

• 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
• 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only
  • 那么.vue文件中的template是由谁处理的呢？
  • 是有vue-template-compiler处理的，将template处理成render函数。所有.vue里面的template都会便编译成render函数。
  • 这个vue-template-compiler在前面的webpack引入组件化开发时安装过（npm install vue-loader vue-template-compiler --save-dev
    ）

runRuntime-Compiler 和 Runtime-only为什么会有如此差异：

(3) render函数的使用

(4) npm run buil过程

(5) npm run dev过程

(6) 修改配置：webpack.base.conf.js起别名

后面在项目开发中在详讲。

3、Vue CLI3

(1) 认识Vue CLI3

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

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录。(所谓的0配置是之前使用vuecli2创建项目的时候，他会生成两个配置webpack的配置文件，build和config，这里的0配置是说vuecli3没有这两个文件了。)
• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化的移除了static文件夹，新增了public文件夹，并且index.html移动到public中。public的文件夹会原封不动的复制到dist里面。

(2) Vue CLI3

用Vue CLI3创建项目：vue create testvuecli3

选Manually select features手动配置后：

这里是一次性配置。

小贴士
保存完项目的配置后，之后我们在创建项目的时候，他这里除了原本的以外，还有前面手动创建的配置叫victory_CEO：

如果我们创建了很多个，这里为了演示在创建一个：

如果创建了多个，想要删除一些已不再使用的配置的话，可以到（C:\Users\Administrator里面找.vuerc）直接删除不要的配置。

(3) 目录结构详解

vuecli3项目怎么跑起来，看package.json：

因此通过npm run serve跑起来。

小贴士

(4) 配置去哪里了？

我们用vuecli3的时候，很多配置文件没有了，因为是0配置开发嘛。因此类似于vuecli2开发项目时的那些配置去哪里了？现在来探讨一下，如果要修改的话要怎么做。

①启动本地服务：vue ui


可通过用户图形化界面来管理项目。导入项目后，会弹出这个管理页面：

我们可以在这里更改一些配置。
②vuecli3设计原则是0配置，因此一些配置信息（build和config）被隐藏起来了。vuecli3进行开发项目时，配置可以到下面的文件里面修改。

或者在根目录下创建一个文件（vue.config.js），然后在git commit -m ‘添加一个配置文件’。

这里有三步：git add .–>git status–>git commit -m ‘修改配置文件’

(5) 自定义配置：起别名