Vue-cli@3.0 插件系统简析

Vue CLI 3.0：全新插件系统的

Vue CLI 3.0作为全新的Vue项目脚手架，其独特的插件系统为开发者带来了更为灵活的使用体验。它摒弃了基于模板的架构，而采用了一套基于插件的架构，将部分核心功能收敛至CLI内部，同时向开发者暴露可拓展的API，以实现CLI功能的灵活拓展和配置。接下来，我们将通过源码这套插件架构是如何设计的。

一、两大核心组件

在Vue CLI 3.0的插件系统中，有两个重要的组成部分：@vue/cli和@vue/cli-service。

1. @vue/cli：提供cli命令服务，如通过vue create命令创建一个新的项目。

2. @vue/cli-service：提供了本地开发构建服务。当你使用vue create <project-name>创建一个新的Vue项目时，你会发现与之前的版本相比，关于webpack的相关配置以及npm script并没有在模板中直接暴露出来。而是在package.json中提供了新的npm script，如"serve"、"build"、"lint"等。这些都是由@vue/cli-service提供的基于webpack及相关插件的本地开发/构建服务。

二、@vue/cli-service内部插件系统

以执行npm run serve启动本地开发服务为例，其流程大致如下：在package.json中定义了相关的脚本命令，如"serve"和"build"，这些都是由@vue/cli-service提供的服务。在@vue/cli-service的bin目录下，有一个启动入口服务文件vue-cli-service.js，它主要负责实例化Service基类并运行相应的service服务。

在@vue/cli-service的lib目录下，定义了一个核心的类Service，它作为@vue/cli的运行时服务存在。在Service类中，实现了插件系统的核心逻辑，包括插件的注册、加载和运行。

三、插件的注册与加载

在Vue CLI 3.0的插件系统中，无论是内置的插件还是用户安装的插件，都是动态完成相关CLI服务的注册。在Service类的实例化的过程中，会根据项目中的node_modules目录下的插件进行扫描和注册。插件可以通过暴露特定的API来实现特定的功能，如提供新的命令、修改webpack配置等。

Vue CLI 3.0的插件系统为开发者提供了更为灵活和可扩展的使用体验。通过基于插件的架构，将核心功能收敛至CLI内部，同时暴露可拓展的API供开发者对CLI的功能进行灵活的拓展和配置。这种设计使得开发者可以更加方便地管理项目，提高了开发效率和项目可维护性。在执行 npm run serve 之后，Service 类开始其实例化之旅。这一过程不仅构建了服务的基础框架，还完成了许多关键任务。让我们深入了解这一过程。

Service 类实例化时，首先进行了一系列的初始化工作。其中包括创建几个重要的数组和对象，如 webpackChainFns、webpackRawConfigFns 和 devServerConfigFns 等。这些数组和对象用于存储不同的函数和配置信息，为后续的流程提供支持。还有一个名为 mands 的对象用于缓存动态注册的 CLI 命令。

在 Service 实例化的过程中，一个重要的任务便是加载插件。插件是 Service 的重要组成部分，它们提供了丰富的功能和命令服务。在实例化过程中，通过调用 resolvePlugins 方法完成了插件的加载工作。插件加载完成后，Service 会将插件提供的不同命令服务所使用的 mode 进行缓存。这些 mode 值代表了不同的执行模式和状态，对于 CLI 命令的执行至关重要。通过缓存这些 mode 值，Service 能够更好地管理和调度不同的命令服务。

一旦 Service 实例化的工作完成，就可以通过调用实例上的 run 方法来启动相应的 CLI 命令服务了。run 方法会根据之前缓存的 mode 值和加载的插件来执行相应的命令服务。通过这种方式，Service 能够根据需求灵活地启动不同的服务，为用户提供丰富的功能和体验。

Service 的实例化过程不仅完成了基础框架的构建，还完成了插件的加载和 mode 值的缓存等重要任务。这些工作为后续的 CLI 命令服务提供了坚实的基础，使得 Service 能够根据需求灵活地提供丰富的功能和体验。在执行 npm run serve 后，Service 的实例化工作完成，为项目的运行和开发提供了强大的支持。在Vue CLI服务中，Service实例化的过程是一项关键任务，它涉及到插件的加载和配置。这个过程主要由`resolvePlugins`方法完成，它负责加载并缓存内部提供的插件以及项目中需要的插件。让我们一起深入了解这个过程。

让我们关注`async run`方法。当调用此方法时，它会根据传入的参数确定运行模式（mode），然后初始化环境变量、用户配置和插件。在这个过程中，它会执行所有加载进来的插件，并注册对应的CLI命令服务和更新Webpack配置。这个过程是整个Vue CLI服务运行的基础，确保了项目的正常运行。

接下来是`resolvePlugins`方法的核心内容。它主要完成了对于@vue/cli-service内部提供的插件以及项目应用(package.json)当中需要使用的插件的加载工作。它会通过`idToPlugin`函数将插件的id进行转换，并加载对应的插件。然后，它会将内置插件和项目中的插件进行合并，形成一个完整的插件列表。在这个过程中，它还处理了本地插件的加载，确保了插件的完整性和可用性。

对于内置插件，它主要包括了服务运行所需要的各种命令，如服务启动、构建、检查、帮助等。还有一些配置插件，它们负责处理不同的运行环境（如开发环境和生产环境）和项目配置（如基础配置、CSS配置等）。这些插件的加载顺序是敏感的，因为它们可能会影响到后续插件的运行和配置。

除了内置插件，`resolvePlugins`方法还会加载项目中的插件。这些插件可能是项目依赖的插件，也可能是项目自定义的插件。这些插件的加载方式是通过项目的package.json文件，找到相关的插件依赖并加载。在这个过程中，它还处理了本地插件的加载，确保本地开发的插件能够被正确地加载和使用。

Vue CLI服务的实例化过程是一个复杂而关键的过程，它涉及到插件的加载、缓存和配置。这个过程确保了Vue CLI服务的正常运行和项目的构建、运行和开发过程的顺利进行。通过深入理解这个过程，我们可以更好地使用和管理Vue CLI服务，提高开发效率和项目质量。在 Vue CLI 服务中，插件扮演着至关重要的角色。它们不仅丰富了 CLI 的功能，还为开发者提供了更多的便利。这些插件大致可以分为两类。

有一类插件通过动态注册新的 CLI 命令，为开发者提供额外的命令行工具。例如，通过运行 './mands/serve'、'./mands/build'、'./mands/inspect' 和 './mands/help' 等命令，开发者可以轻松地启动对应的 CLI 命令服务。这些命令的注册是通过插件完成的，它们使得在 npm script 中执行这些命令变得简单而直接。

另一类插件则专注于 webpack 的本地编译构建配置。在 Vue CLI 服务中，这些插件负责完成各种与 webpack 相关的配置任务。例如，'.config/base'、'.config/css'、'.config/dev'、'.config/prod' 和 '.config/app' 等文件都是这类插件的配置文件。@vue/cli-service 将 webpack 的开发构建功能收敛到内部完成，大大简化了开发者的配置工作。

当插件加载完成后，service.run 方法被调用，开始执行所有已加载的插件。在每个插件执行的过程中，都会接收到一个 PluginAPI 的实例作为第一个参数。PluginAPI 是整个 Vue CLI 服务中的一个核心基类，它提供了许多有用的方法和功能。

通过 PluginAPI，插件可以注册自定义的 CLI 命令、更新 webpack 配置等。例如，使用 api.registerCommand 方法，插件可以注册新的 CLI 命令，以提供更多的功能和服务。而通过 api.chainWebpack 和 api.configureWebpack 方法，插件可以以不同的方式更新 webpack 配置。api.chainWebpack 提供了一种链式操作 webpack 配置的方式，而 api.configureWebpack 则接受 raw 式的配置形式，并通过 webpack-merge 合并 webpack 配置。

这些丰富的功能和灵活的用法，使得 Vue CLI 插件成为了一个强大而实用的工具。开发者可以通过编写自己的插件来扩展 Vue CLI 的功能，从而更加高效地完成项目开发。这些插件也使得 Vue CLI 服务更加完善和健壮，为开发者提供了更好的开发体验。 Webpack 配置并生成最终的配置方案

通过调用之前通过 `chainWebpack` 和 `configureWebpack` 完成的改造，我们可以得到最终的 Webpack 配置。这个过程涉及到深入理解并整合各种插件的功能，确保最终的配置方案能够满足项目的需求。这个过程如同对一块复杂的乐高积木进行组装，需要我们既理解每个部件的功能，又能将它们有机地组合在一起。

现在让我们深入了解 Vue CLI 服务中的动态注册 CLI 服务插件。以 `serve` 服务为例，这个服务允许我们轻松地启动开发服务器。通过 `./mands/serve` 文件，我们可以看到这个服务如何被注册。这个模块暴露一个函数，接收 `api` 和 `options` 作为参数。通过 `api.registerCommand` 方法，我们可以注册 CLI 命令（在这个例子中是 `serve` 服务）。这个服务提供了许多选项，如指定主机、端口、是否使用 HTTPS 等，使得开发者可以根据项目需求进行灵活配置。

再来看 `@vue/cli-service` 内部关于 webpack 配置的插件（位于 `./config/base`）。这个插件使用 `api.chainWebpack` 方法来完成 webpack 的配置修改。不同于传统的配置式 webpack 使用方式，这种方式使得 webpack 的配置更加灵活和动态。当你的项目迁移到 `@vue/cli@3.0` 时，使用的 webpack 插件也需要适应这种 API 式的配置方式。

这种设计使得插件不仅提供自身功能，还需要帮助调用方完成插件的注册等工作。这对于开发者来说是一个好消息，因为在团队开发中，内部配置往往不能满足所有需求。得益于 `@vue-cli@3.0` 的插件构建设计，开发者无需将内部配置进行 Eject，而是可以直接使用 `@vue/cli-service` 暴露出来的 API 来完成特殊的开发构建需求。这样的设计不仅简化了开发者的配置工作，也使得项目的构建过程更加灵活和可定制。

通过、整合和改造 Webpack 配置，我们可以得到符合项目需求的最终配置方案。Vue CLI 服务的插件设计使得这个过程更加简单和灵活，让开发者能够专注于实现项目功能，而不是纠缠于繁琐的配置工作。经过深入研究，我对 Vue CLI 的插件系统有了更深入的了解。接下来，我将生动形象地为大家解读其核心部分。

我们来看 Service.js。在 Vue CLI 生态中，Service.js 是服务的基类，它为本地开发构建时的插件加载提供了强大的支持。这个类包含了内部插件和项目应用插件的初始化过程，并且它的单例被所有插件共享。插件通过使用这个单例来完成 webpack 的更新。这就像是一个中央调度站，确保所有插件协同工作，共同为项目构建贡献力量。

接下来是 PluginAPI.js。这个文件为插件提供了一个接口，就像是为插件量身定制的工具箱。所有供 Vue CLI-service 使用的本地开发构建插件，它们接收的第一个参数都是 PluginAPI 的实例。这个实例赋予了插件强大的能力，如注册 CLI 命令、执行对应的服务以及更新 webpack 配置等。

当我们谈论到 Vue CLI 3.0，一个显著的变化是基于插件的 generator 来完成项目的初始化工作。这意味着，与传统的远程模板不同，Vue CLI 3.0 将大而全的模板拆分为基于插件系统的工作方式。每个插件负责扩展自己的项目应用模板。这种设计使得插件系统更加灵活，易于扩展和维护。

在终端里，Vue CLI 提供了几个常用的命令，如 `vue create ` 和 `vue ui`。当你需要自定义符合开发要求的脚手架时，可以通过开发 Vue CLI 插件来拓展 Vue CLI 的服务。这些插件通常包含一个 Service 插件作为主要导出，并可选包含一个 Generator 和一个 Prompt 文件。

当我们谈论到 Vue CLI 的插件安装，`vue add ` 命令变得尤为重要。执行这条命令后，Vue CLI 会帮我们完成插件的下载、安装以及执行插件所提供的 generator。这个过程背后隐藏着复杂的代码逻辑。在 `vue/cli/lib/add.js` 中，我们看到了一个 `add` 函数，它负责安装插件并判断插件是否提供了 generator，若提供则执行对应的 generator。

Vue CLI 的插件系统是一个强大而灵活的工具，它允许开发者根据需要扩展 CLI 的功能。通过深入理解其核心模块和命令，我们可以更好地利用这个系统来创建符合我们需求的自定义脚手架。在 Vue CLI 的内部，存在一个核心组件，类似于 Generator 的存在。这个 Generator 是 Vue CLI 的插件执行的核心机制。当我们在项目中引入并使用 Vue CLI 插件时，实际上就是在执行对应的 Generator 实例。这个实例化的过程，就是将插件提供的 generator 方法进行加载并应用的过程。

当我们在命令行中调用 invoke 函数时，Vue CLI 开始执行一系列的操作。这个函数首先会从项目的 package.json 文件中获取插件的名称，然后从对应的插件中加载 generator 方法。这个过程就像是启动一个引擎，为后续的生成工作做好准备。

接下来，runGenerator 函数被调用，它的主要任务就是实例化 Generator。在这个过程中，它会读取项目中的文件并将其转化为字符串形式保存在内存中。它还会创建一个 CompleteCbs 对象，用于处理生成过程中的各种回调函数。

一旦 Generator 实例被创建，就会开始执行 generate 方法。这个方法会将内存中的文件输出到实际的文件系统中，同时还会提取配置文件并进行检查。这个过程就像是插件在项目中施展魔法，生成我们所需要的各种文件和配置。

Vue CLI 的插件系统就像一个强大的生成器，通过调用 invoke 函数和 runGenerator 函数，我们能够轻松地应用各种插件，生成我们需要的代码和配置。这个过程既方便又高效，极大地提高了我们的开发效率。每一个 Vue CLI 插件，都对应一个 Generator 实例，它们共同构成了 Vue CLI 的强大生态系统。在Vue的CLI世界中，Generator类扮演着核心角色。当创建或更新一个Vue项目时，它是驱动项目生成的重要引擎。此类接收一系列参数，包括上下文、插件、包信息等等，来初始化一个项目生成器实例。它的工作不仅仅是简单的数据接收，更是对插件的管理和应用。

在这个Generator中，有一个引人注目的部分就是插件的处理。插件在Vue CLI中扮演着关键角色，它们为CLI提供了丰富的功能扩展能力。当我们在项目中引入一个插件时，实际上是在引入一个带有特定功能的generator。每个插件暴露出一个函数，这个函数在被调用时接收一个名为api的参数。这个api是插件与Generator之间的桥梁，它提供了许多方法供插件使用，以完成特定的任务或应用拓展。

这个Generator类的工作流程是这样的：它接收一系列的插件并进行处理。对于每一个插件，它都会创建一个GeneratorAPI实例并传递给插件暴露出来的函数。这意味着每个插件都有一个自己的GeneratorAPI实例，用于执行特定的任务或与其它插件交互。在这个过程中，它也会从插件中获取选项（options），这些选项是插件的配置参数，用于控制插件的行为和输出。

当涉及到@vue/cli-service时，事情就变得更加有趣了。这个特殊的插件提供了项目的核心功能和结构。它的选项决定了项目的基础配置和设置。在初始化过程中，Generator会检查是否存在@vue/cli-service插件，如果存在的话，它会直接使用该插件提供的选项作为根选项（rootOptions）。如果不存在，它就会通过推断（infer）的方式来确定根选项的值。这样确保了无论插件是否存在，都能顺利生成项目。

Vue CLI的Generator是一个强大的工具，它通过管理插件和应用api来扩展项目的功能。每一个插件都是一个小小的魔法盒，它们通过Generator提供的api来扩展CLI的能力，从而创造出丰富多彩的项目生成体验。Vue CLI的插件系统与API：与实例展示

开发者们经常利用Vue CLI的插件系统来完成项目应用的拓展工作。这个强大的系统提供了许多API，让开发者能够轻松实现各种功能。接下来，我们将详细介绍其中的一些核心API以及它们是如何在插件中发挥作用。

Vue CLI的插件系统拥有许多实用的API，其中包括：

1. 拓展package.json配置方法(api.extendPackage)：开发者可以通过这个API修改或增加项目的package.json文件内容，以适应不同的项目需求。

2. 利用ejs渲染模板文件的方法(api.render)：使用这个API可以方便地生成和渲染模板文件，提高开发效率。

3. 内存中保存的文件字符串全部被写入文件后的回调函数(api.onCreateComplete)：此API确保在文件创建完成后执行特定的操作，如lint检查。

4. 向文件当中注入import语法的方法(apijectImports)：通过这个API，可以轻松地在项目中引入新的依赖或模块。

以@vue/cli-plugin-eslint插件为例，它的generator方法主要完成了以下工作：

添加了vue-cli-service cli lint服务命令

引入了相关的lint标准库依赖

接下来，让我们看一下这个插件是如何使用Vue CLI提供的API的。在插件的主体部分，有一个模块导出的函数，这个函数接收四个参数：api、config、lintOn和invoking。其中，api是GeneratorAPI对象，是Vue CLI暴露给插件的api对象，提供了许多项目应用的拓展功能。

在这个函数中，首先根据传入的lintOn参数设置ESLint的配置。然后，根据传入的config参数设置不同的ESLint规则库依赖。使用api.extendPackage方法将设置的配置添加到项目的package.json文件中。

Vue CLI的插件系统还包括一些其他的核心模块，如add.js、invoke.js、Generator.js等。这些模块共同协作，完成插件的下载、安装、加载和执行等工作。

Vue CLI的插件系统与API为开发者提供了强大的工具，使开发者能够轻松地完成项目应用的拓展工作。无论是添加新的功能，还是修改项目的配置，都可以通过Vue CLI的插件系统与API来实现。希望这篇文章能够帮助你更好地理解Vue CLI的插件系统与API，从而更有效地进行开发工作。Vue CLI与CLI服务：Vue开发的核心工具

Vue CLI不仅提供了vue cli命令，还负责偏好设置、生成模板以及安装插件依赖的工作。只需简单的命令如vue create 和vue add ，您就可以轻松启动新的Vue项目或为您的项目添加新的插件。这些功能大大简化了Vue开发者的日常工作流程。

而在整个Vue插件系统中，有一个非常重要的内部核心插件——@vue/cli-service。它不仅提供了webpack配置的更新，还提供了本地开发构建服务。这意味着开发者可以在本地实时查看他们的代码更改，无需等待远程服务器响应。这对于快速迭代和测试是非常有用的。

@vue/cli-service内含的基础webpack配置和npm script命令等核心功能，都被插件化拆解，以约定式的方式向开发者提供插件的拓展能力。这意味着开发者可以根据他们的需求和偏好，轻松扩展和定制他们的开发环境。

如果你对如何开发@vue/cli的插件感兴趣，我们推荐你查阅相关的官方文档和教程。在这里，我们长沙网络推广团队为大家简要介绍了Vue的插件系统，希望能对大家有所帮助。

如果您有任何疑问或需要进一步的帮助，请随时给我们留言。无论是关于Vue CLI、CLI服务还是其他相关的技术疑问，我们都会尽快回复。在此，我们也要感谢大家对于狼蚁SEO网站的支持和信任。我们会继续努力，为大家提供有价值的内容和服务。

使用Cambrian渲染工具的“body”模式，您可以更加灵活地展示您的内容，吸引更多的读者。我们鼓励大家充分利用这些工具，提升您的开发效率和用户体验。让我们一起在Vue的世界里，创造更多的可能！