Vue 3源码深度解析之：`Vue`的`CLI`工具：`Vue`项目模板的底层生成机制。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，大家好！我是今天的主讲人，咱们今天聊点刺激的——Vue 3 CLI 的底层秘密，看看它是怎么变戏法，给你嗖嗖嗖地生成项目模板的。准备好了吗？系好安全带，发车！

一、Vue CLI：表面光鲜，内里乾坤

咱们每天 vue create my-project 命令敲得飞起，有没有想过，这背后到底发生了什么？ Vue CLI，全称 Vue Command Line Interface，直译过来就是 Vue 命令行界面。它可不是一个简单的命令行工具，而是一套完整的项目脚手架生成系统。

想象一下，你要盖一栋房子。CLI 就像一个包工头，给你提供地基、图纸、各种材料，甚至连装修风格都给你选好了。你只需要动动手指，输入几行命令，一个标准的 Vue 项目就搭建起来了。

二、CLI 的核心组件：庖丁解牛

要理解 CLI 的底层机制，我们得先把它拆开来，看看它都由哪些核心组件构成：

组件名称	功能描述
`@vue/cli`	CLI 的核心包，负责处理命令行参数、项目创建流程、插件管理等。
`@vue/cli-service`	提供本地开发服务器、构建打包工具、ESLint、TypeScript 等常用工具的配置和集成。
`@vue/cli-plugin-*`	各种插件，比如 `@vue/cli-plugin-babel`、`@vue/cli-plugin-eslint` 等，用于集成 Babel、ESLint 等工具。
`vue-template-*`	项目模板，定义了项目的目录结构、依赖、配置文件等。例如 `vue-template-webpack`、`vue-template-simple`。这些通常已经过时，取而代之的是 `vue-cli-plugin-typescript` 等插件提供的模板。
`generator`	模板生成器，负责根据用户选择的选项，将模板文件复制到项目目录，并进行必要的修改。

简单来说，@vue/cli 是大脑，负责指挥；@vue/cli-service 是工具箱，提供各种工具；@vue/cli-plugin-* 是插件，扩展功能；vue-template-* 是蓝图，定义项目结构；generator 是施工队，负责把蓝图变成现实。

三、vue create 命令背后的故事：一步一步解谜

vue create my-project 这个命令，看似简单，实际上包含了多个步骤：

参数解析： CLI 首先解析你输入的命令和参数，比如项目名称、是否使用 TypeScript 等。
模板选择： 根据你选择的选项，CLI 会选择合适的项目模板。如果你没有指定模板，CLI 会提供一个交互式界面，让你选择预设的模板或者手动配置。
模板下载/获取： CLI 会从远程仓库下载选定的模板，或者使用本地已有的模板。现在更常见的是通过插件的方式集成模板。
依赖安装： CLI 会根据模板中的 package.json 文件，安装项目所需的依赖。
文件生成： CLI 使用模板生成器，将模板文件复制到项目目录，并根据你的选择进行修改。
初始化完成： CLI 完成初始化工作，并给出提示，比如如何启动项目。

四、深入源码：以 TypeScript 模板为例

咱们以最流行的 TypeScript 模板为例，深入源码，看看 CLI 到底是怎么生成项目的。

首先，@vue/cli 会调用 @vue/cli-service 中的相关方法，来处理项目创建流程。

其次，关键在于 @vue/cli-plugin-typescript 这个插件。它会提供一个 generator 函数，负责生成 TypeScript 相关的配置文件和代码。

// 伪代码，简化版
// @vue/cli-plugin-typescript/generator.js

module.exports = (api, options, rootOptions) => {
  api.extendPackage({
    dependencies: {
      'vue-class-component': '^7.2.3',
      'vue-property-decorator': '^9.1.2'
    },
    devDependencies: {
      '@vue/cli-plugin-typescript': '~5.0.0',
      'typescript': '~4.5.5'
    }
  });

  api.render('./template'); // 复制 template 目录下的文件到项目目录
};

这个 generator 函数主要做了两件事：

修改 package.json： api.extendPackage 方法用于修改 package.json 文件，添加 TypeScript 相关的依赖和开发依赖。
复制模板文件： api.render 方法用于复制 template 目录下的文件到项目目录。template 目录包含了 TypeScript 相关的配置文件（比如 tsconfig.json）和示例代码（比如 src/App.vue）。

api.render 方法背后，CLI 使用了一个叫做 ejs 的模板引擎。ejs 允许你在模板文件中使用 JavaScript 代码，根据用户选择的选项，动态生成不同的内容。

例如，tsconfig.json 模板文件可能长这样：

// tsconfig.json.ejs

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

ejs 引擎会将这个模板文件渲染成最终的 tsconfig.json 文件。

五、vue-cli-service：幕后英雄

@vue/cli-service 提供了很多有用的功能，比如：

本地开发服务器： vue-cli-service serve 命令可以启动一个本地开发服务器，支持热重载，方便你进行开发。
构建打包： vue-cli-service build 命令可以将你的项目打包成生产环境可用的文件。
ESLint： vue-cli-service lint 命令可以对你的代码进行静态分析，检查代码风格和潜在的错误。

vue-cli-service 的核心是 webpack。它使用 webpack 来构建和打包你的项目。vue-cli-service 封装了 webpack 的配置，让你不需要手动配置 webpack，就可以使用 webpack 的强大功能。

六、插件机制：无限可能

Vue CLI 的插件机制非常强大。你可以通过插件来扩展 CLI 的功能，集成各种工具和库。

例如，你可以使用 @vue/cli-plugin-eslint 插件来集成 ESLint，使用 @vue/cli-plugin-unit-jest 插件来集成 Jest 单元测试。

插件的本质就是一个 Node.js 模块，它导出一个函数，这个函数接受一个 api 对象和一个 options 对象作为参数。

api 对象提供了很多方法，用于修改 package.json 文件、复制模板文件、注册命令等。

options 对象包含了用户在创建项目时选择的选项。

七、自定义模板：打造专属脚手架

如果你对现有的模板不满意，你可以自定义模板，打造专属的脚手架。

自定义模板的步骤如下：

创建一个模板仓库： 你可以创建一个 GitHub 仓库，用于存放你的模板文件。
定义模板文件： 在模板仓库中，创建 template 目录，将你的模板文件放在这个目录下。
创建 generator.js 文件： 在模板仓库中，创建 generator.js 文件，用于定义模板生成逻辑。
使用自定义模板： 在创建项目时，使用 --preset 选项指定你的模板仓库的 URL。

例如：

vue create my-project --preset gitlab:your-gitlab-username/your-template-repo

八、代码示例：一个简单的自定义插件

咱们来写一个简单的自定义插件，用于在项目创建完成后，自动安装 axios 依赖。

// my-plugin.js

module.exports = (api, options) => {
  api.afterInvoke(() => {
    // 安装 axios 依赖
    api.extendPackage({
      dependencies: {
        axios: '^0.27.2'
      }
    });

    // 自动安装依赖
    const { execSync } = require('child_process');
    execSync('npm install', { cwd: api.resolve('.'), stdio: 'inherit' });
  });
};

这个插件使用了 api.afterInvoke 方法，在项目创建完成后执行一段代码。这段代码首先使用 api.extendPackage 方法，将 axios 添加到 package.json 文件的依赖列表中。然后，使用 child_process.execSync 方法，自动执行 npm install 命令，安装依赖。

要使用这个插件，你需要将它放在一个 Node.js 模块中，然后在创建项目时，使用 --plugins 选项指定插件的路径。

例如：

vue create my-project --plugins ./my-plugin.js

九、总结：CLI 的魅力

Vue CLI 是一个非常强大的工具，它可以帮助你快速搭建 Vue 项目，提高开发效率。

通过深入了解 CLI 的底层机制，你可以更好地理解 Vue 项目的结构和配置，也可以自定义模板和插件，打造专属的开发工具。

优点	缺点
快速搭建项目	隐藏了底层细节，不利于深入理解
提供常用工具和配置	配置过于复杂，不易自定义
强大的插件机制，易于扩展	依赖过多，可能导致项目体积过大

希望今天的讲座能让你对 Vue CLI 有更深入的了解。记住，工具是死的，人是活的。理解了工具的原理，才能更好地利用工具，创造价值。

下次有机会再跟大家分享更多 Vue 的底层秘密，拜拜！

发表回复 取消回复

发表回复取消回复