VueCli 原理与实践

目前我们的主要目的是：将VueCli2 与 VueCLi3，4进行对比，同时我们还会将 React-Script进行剖析和对比，并实现一个简单的【基础框架】开发

 

一、VueCli2 实践

 

 

 

 

根据 VueCli2 的官网，我们看到有三个点需要注意：

 

1. VueCli2 使用的安装名与 VueCli3 的安装名不同

2. 当 vue init 时需要一个模版名，并根据模版名安装对应的项目，不只有weboack一个模版

3. 看到 vuejs-templates/webpack 点击进入

 

 

二、剖析 VueCli 2 生成 目录，及存在问题

 

 

结论：从以上代码中，我们可以清楚的明白，webpack是安装在了项目目录下，可通过自己配置相关webpack

存在的问题：VueCli2拉取的项目中，其实我们更改编辑的只有业务代码，对于基础代码类似webpack，我们并不会频繁使用，加上如果很多和项目，使用的基础代码相同的情况下，导致在后期基础代码的升级和维护上需要一些花费时间和成本。

解决办法：1. 将基础代码封装

　　　　　2. 所有的项目，共用同一个基础代码

保留目前存在的问题

 

三、VueCli 3 的实践

1. 安装 

2. 使用

 

3. 分析

 

疑问：为什么要做了再一次的封装

解答：@vue/cli-service 这个脚手架，主要是帮我们将基础代码进行了封装，例如webpack

 

疑问：为什么将基础代码封装？它会给我带来什么好处？

解答：在vueCli2 的时候我们会发现，我们需要新增的只有业务代码，在基础代码webpack上我们并没有对其进行大的更改，当我们开发的项目越来越多的时候，我们会发现基本代码很类似，但webpack的维护成本就很大，基本每个项目我们都需要维护，如果我们共用一套基础代码的话，就只会维护一套代码就可，在版本更新或者修改版本的情况下，我们就会节省人力和时间

 

疑问：@vue/cli-plugin 是什么？

解答：

脚手架我们在设计的时候会有这么几种情况，

1. 根据脚手架的规则去设计，但有弊端，扩展性不是很好

2. 将所有可以考虑用到的插件和逻辑，全部在一个脚手架实现，但有弊端，扩展性

1. @vue/cli-plugin 主要是插件，在vueCli2安装项目时，会提示我们是否安装 router, less 等等插件，

2. 因每个人选择的插件会不同，比如有的人喜欢less，有的喜欢sass，但vueCLi2的模式，就是将所有的可能性都包含在脚手架里面，就会让脚手架变得很重，

3. 所以我们以插件的形式把基础代码跟插件分开，就会使脚手架只做自己需要做的事，不需要考虑太多

 

疑问：在项目中我需要额外配置基础代码，那应该如何修改基础代码里面的内容呢？

1. 在项目的根目录下，新建Vue.config.js 文件，可通过该文件进行配置基础代码的一些配置，也可覆盖基础代码

 

四、react-Script 实践

1. 安装

 

 

 2. 使用

 

 

总结：

1. 执行npm run eject 命令，会提示我这是一个不可逆的操作，

2. 如果我们需要执行这个操作，那么就表示我们的webpack后期需要我们自己去维护，但如果我们但项目脚手架内的webpack已经满足不了我们的需求的时候，我们就不得不执行这个不可逆的操作，那后期我们就需要自己去维护webpack ，

3. 项目下就会安装webpack和一些其他文件，

4. 目录下就会多出一个config文件，内部是webpack的配置文件，可自行修改