各位同学，早上好！（或者下午好，晚上好，取决于你们什么时候看到这篇文章）。今天咱们来聊聊 Vue CLI 插件开发，这玩意儿听起来高大上，其实就像给你的 Vue 项目装个“百宝箱”，需要什么功能，往里塞就行了。
咱们的目标是，让你听完这节课，也能撸起袖子写自己的 Vue CLI 插件，给你的项目添砖加瓦！
第一部分：Vue CLI 插件是什么？为什么要开发它？
先来搞清楚，什么是 Vue CLI 插件？简单来说，它就是一段代码，能够扩展 Vue CLI 的功能，让你的项目更强大、更便捷。
-
核心作用：
- 自动化配置： 自动配置 webpack、babel、postcss 等等，省去手动配置的烦恼。
- 集成第三方库： 快速集成 UI 库、状态管理工具、HTTP 请求库等，不再需要一个个手动安装和配置。
- 添加自定义命令： 添加自定义命令，例如：一键生成组件、部署项目等等，提高开发效率。
- 代码生成： 自动生成模板代码，例如：生成 CRUD 页面、生成 API 接口等等，减少重复劳动。
-
为什么要开发它？
- 提高效率： 避免重复配置，快速搭建项目，专注于业务逻辑开发。
- 统一规范： 团队成员使用相同的插件，保持项目配置一致，避免出现各种奇奇怪怪的问题。
- 代码复用： 将常用的功能封装成插件，方便在多个项目中使用，避免重复造轮子。
- 社区贡献： 将优秀的插件分享给社区，帮助更多开发者，提升个人影响力。
第二部分：Vue CLI 插件开发的基本流程
开发 Vue CLI 插件其实并不难，就像搭积木一样，一步一步来，就能搭建出一个功能强大的插件。
-
创建插件项目：
首先，我们需要创建一个空的 npm 项目，作为插件的容器。
mkdir vue-cli-plugin-my-plugin # 创建项目目录 cd vue-cli-plugin-my-plugin # 进入项目目录 npm init -y # 初始化 npm 项目接下来，我们需要安装
@vue/cli-service作为开发依赖，因为我们需要用到它的一些 API。npm install @vue/cli-service --save-dev -
创建
index.js文件：在项目根目录下创建一个
index.js文件，这是插件的入口文件，Vue CLI 会自动加载这个文件。// index.js module.exports = (api, projectOptions) => { // 插件逻辑代码写在这里 };api： Vue CLI 提供给插件的 API 对象，包含了各种有用的方法。projectOptions：vue.config.js中的配置选项，插件可以读取这些配置，进行相应的处理。
-
编写插件逻辑：
这是插件开发的核心部分，我们需要根据需求，编写插件的逻辑代码。下面是一些常用的 API 和示例：
-
api.registerCommand(name, options, fn)： 注册一个自定义命令。api.registerCommand('my-command', { description: '这是一个自定义命令', usage: 'vue-cli-service my-command [options]' }, args => { console.log('执行了自定义命令！'); console.log('参数：', args); });执行
vue-cli-service my-command就可以看到控制台输出了相应的信息。 -
api.chainWebpack(fn)： 修改 webpack 配置。api.chainWebpack(config => { // 添加一个 loader config.module .rule('my-loader') .test(/.my-file$/) .use('my-loader') .loader('my-loader'); // 修改 outputDir config.output.path('dist-custom'); }); -
api.configureWebpack(fn)： 另一种修改 webpack 配置的方式，更简洁。api.configureWebpack(config => { return { resolve: { alias: { '@components': path.resolve(__dirname, 'src/components') } } }; }); -
api.extendPackage(fields)： 修改package.json文件。api.extendPackage({ dependencies: { 'lodash': '^4.17.21' }, devDependencies: { 'eslint': '^7.32.0' } });这个方法会自动安装或更新依赖。
-
api.injectImports(file, imports)： 向指定文件中注入 import 语句。api.injectImports(api.entryFile, `import _ from 'lodash'`);这个方法会在入口文件（通常是
src/main.js）的顶部添加import _ from 'lodash'。 -
api.render(source, additionalData)： 将模板文件渲染到项目中。api.render('./template'); // 将 ./template 目录下的文件复制到项目中 api.render({ './src/components/MyComponent.vue': './template/MyComponent.vue' }); // 将 ./template/MyComponent.vue 渲染到 ./src/components/MyComponent.vueadditionalData可以传递数据到模板中。-
模板文件示例（./template/MyComponent.vue）：
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script> export default { name: 'MyComponent', data() { return { title: 'Hello World', message: 'This is a component generated by a plugin.' } } } </script>
-
-
api.resolve(file)： 解析项目中的文件路径。const entryFile = api.resolve('src/main.js'); // 获取 src/main.js 的绝对路径 -
api.hasPlugin(id)： 检查是否安装了指定插件。if (api.hasPlugin('typescript')) { console.log('项目使用了 TypeScript'); } -
api.onCreateComplete(fn)： 在项目创建完成后执行的回调函数。api.onCreateComplete(() => { console.log('项目创建完成！'); });
-
-
完善
package.json文件：我们需要在
package.json文件中添加一些信息，告诉 Vue CLI 这是一个插件。{ "name": "vue-cli-plugin-my-plugin", "version": "1.0.0", "description": "一个简单的 Vue CLI 插件", "main": "index.js", "keywords": [ "vue", "vue-cli", "plugin" ], "author": "Your Name", "license": "MIT", "vue-cli-plugin": true, // 关键：声明这是一个 Vue CLI 插件 "dependencies": { "lodash": "^4.17.21" // 插件依赖的第三方库 }, "devDependencies": { "@vue/cli-service": "^5.0.0" // 开发依赖 } }vue-cli-plugin: true： 这个字段告诉 Vue CLI，这是一个插件，必须添加。keywords： 添加一些关键词，方便在 npm 上搜索到你的插件。dependencies： 插件依赖的第三方库，会被自动安装到项目中。
-
发布插件：
如果你想将插件分享给其他人使用，可以将它发布到 npm 上。
- 注册 npm 账号： 如果你还没有 npm 账号，需要先注册一个。
- 登录 npm： 在命令行中执行
npm login，输入你的用户名、密码和邮箱。 - 发布插件： 在插件项目根目录下执行
npm publish。
发布之前，最好先更新一下
package.json中的版本号，避免覆盖之前的版本。
第三部分：插件的使用
开发完插件后，我们需要在 Vue 项目中使用它。
-
安装插件：
在 Vue 项目中，使用 Vue CLI 提供的命令安装插件。
vue add my-plugin # 如果插件发布到了 npm 上，可以直接使用插件名称 vue add ./path/to/vue-cli-plugin-my-plugin # 如果插件没有发布到 npm 上，可以使用本地路径vue add命令会自动安装插件，并执行插件的index.js文件。 -
配置插件：
有些插件可能需要一些配置选项，可以在
vue.config.js文件中配置。// vue.config.js module.exports = { pluginOptions: { myPlugin: { option1: 'value1', option2: 'value2' } } }插件可以通过
api.projectOptions访问这些配置。
第四部分：实战演练：开发一个自动注册组件的插件
现在，让我们来做一个实战演练，开发一个自动注册组件的插件。这个插件的功能是：自动扫描指定目录下的 Vue 组件，并将它们注册为全局组件。
-
创建插件项目：
mkdir vue-cli-plugin-auto-register-components cd vue-cli-plugin-auto-register-components npm init -y npm install @vue/cli-service --save-dev -
创建
index.js文件：// index.js const glob = require('glob'); const path = require('path'); module.exports = (api, projectOptions) => { api.onCreateComplete(() => { // 获取组件目录 const componentsDir = api.resolve('src/components'); // 扫描组件 const componentFiles = glob.sync(path.join(componentsDir, '**/*.vue')); // 注册组件 let importStatements = ''; let componentRegistrations = ''; componentFiles.forEach(file => { const componentName = path.basename(file, '.vue'); const importName = `Component${componentName}`; importStatements += `import ${importName} from '${file.replace(api.resolve('.'), '.')}';n`; componentRegistrations += `Vue.component('${componentName}', ${importName});n`; }); // 修改入口文件 const entryFile = api.resolve('src/main.js'); const code = ` import Vue from 'vue'; ${importStatements} export default function (Vue) { ${componentRegistrations} } `; api.injectImports(entryFile, `import registerComponents from './register-components'`); api.afterInvoke(() => { api.render({ './src/register-components.js': { code }, }); }); }); }; -
完善
package.json文件：{ "name": "vue-cli-plugin-auto-register-components", "version": "1.0.0", "description": "一个自动注册组件的 Vue CLI 插件", "main": "index.js", "keywords": [ "vue", "vue-cli", "plugin", "components", "auto-register" ], "author": "Your Name", "license": "MIT", "vue-cli-plugin": true, "dependencies": { "glob": "^7.1.7" // 插件依赖的第三方库 }, "devDependencies": { "@vue/cli-service": "^5.0.0" // 开发依赖 } } -
运行测试项目
新建一个测试项目，然后在测试项目中运行一下命令
vue add ./path/to/vue-cli-plugin-auto-register-components该命令会将src/components 下的所有组件都注册为全局组件。
第五部分：高级技巧与注意事项
-
使用
vue inspect命令：vue inspect命令可以查看 Vue CLI 的配置，包括 webpack 配置、loader 配置等等，可以帮助你更好地理解 Vue CLI 的工作原理。vue inspect > output.js # 将配置输出到 output.js 文件 -
使用
vue invoke命令：vue invoke命令可以执行插件的 install 钩子，用于初始化插件的一些配置。vue invoke my-plugin # 执行插件的 install 钩子 -
处理兼容性问题：
由于 Vue CLI 版本更新较快，插件需要考虑兼容性问题。可以使用
api.version获取 Vue CLI 的版本号，根据不同的版本执行不同的逻辑。 -
编写详细的文档：
一个好的插件需要有详细的文档，说明插件的功能、用法、配置选项等等，方便其他开发者使用。
-
测试插件：
在发布插件之前，一定要进行充分的测试，确保插件能够正常工作，避免出现各种 bug。
第六部分：总结
Vue CLI 插件开发是一个非常有用的技能，可以帮助你提高开发效率、统一项目规范、代码复用等等。希望通过今天的课程，你已经掌握了 Vue CLI 插件开发的基本流程，能够开发出自己的 Vue CLI 插件，为你的项目添砖加瓦！
记住，实践是检验真理的唯一标准。多写代码，多踩坑，才能真正掌握 Vue CLI 插件开发！
各位同学，下课！