Vue日常总结|vue-cli v4.5.17脚手架创建项目与运行原理 Vue日常总结|vue.js

vue-cli v4.5.17脚手架创建项目与运行原理

一、什么是Vue脚手架？
二、Vue CLI 安装和使用
三、vue create 项目的过程
四、项目的目录结构
五、Vue CLI的运行原理

一、什么是Vue脚手架？

我有一篇文章介绍了webpack配置的相关知识，包括Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低

所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架
脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架
Vue的脚手架就是Vue CLI
CLI是Command-Line Interface, 翻译为命令行界面
我们可以通过CLI选择项目的配置和创建出我们的项目
Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置

二、Vue CLI 安装和使用

安装Vue CLI（目前最新的版本是v4.5.17）
我们是进行全局安装，这样在任何时候都可以通过vue的命令来创建项目
npm install @vue/cli -g
升级Vue CLI
如果是比较旧的版本，可以通过下面的命令来升级
npm update @vue/cli -g
通过Vue的命令来创建项目
vue create 项目的名称

三、vue create 项目的过程

文章图片

文章图片

四、项目的目录结构

文章图片

文章图片

五、Vue CLI的运行原理

文章图片

按照上面的流程图来详细解释一下vue-cli的运行原理

当我们在终端运行npm run serve 的时候，实际上是在运行vue-cli-service serve
而运行vue-cli-service serve的时候，会自动找node_modules文件夹下的.bin目录下的vue-cli-service文件

文章图片
如上图所示，在vue-cli-service文件中可以看到，它实际上又会去找@vue下的cli-service下的bin下的vue-cli-service.js
到了这个文件之后，可以发现本质上进行了new Service()的操作，并且调用了run（）方法，而service实例来自于lib目录下的Service.js文件

文章图片
所以接下来看一下lib目录下的Service.js文件，如下图所示，该文件导出一个类，这个类的构造函数有一步操作就是执行了resolvePlugins了这个函数，而这个函数就是做了一个映射，将各个配置文件进行映射处理

文章图片

文章图片
lib目录下的Service.js文件，还有需要调用的run方法如下图所示，所以接下来看一下这个run方法是干什么的

文章图片
根据上图我们发现首先会调用init这个方法，所以接下来看一下init这个方法

文章图片
根据上图，我们首先看一下怎样加载用户自定义的配置文件loadUserOptions()

文章图片
再看一下this.plugins.forEach中的apply，我们通过上面分析指导需要传入两个参数，首先看一下第一个参数new PluginAPI(id, this)，这个参数new了一个PluginAPI，所以看一下PluginAPI.js这个文件

文章图片
接下来，我们看一下apply这个函数的本质是什么，这里以serve.js文件为例进行举例，其他文件build.js等也是同样的道理。

文章图片
所以经过上面那么多得操作，现在来到了执行webpack的地方，上面的这些操作就对应了流程图的步骤，下面来看一下具体webpack是怎样执行的。

文章图片
上面的resolveWebpackConfig方法就是Service.js文件中提供的方法

文章图片
所以vue-cli的运行原理大概上就是上面的那些理解。