面试题：Vue CLI 插件机制深度剖析及自定义插件实践

Question

Vue CLI 的插件机制为开发者提供了丰富的扩展能力。请深入剖析 Vue CLI 的插件机制，包括插件的加载过程、生命周期等。并说明如何开发一个自定义的 Vue CLI 插件，以实现特定的项目需求，例如自动化部署相关功能。

Answer 1

Vue CLI 插件机制剖析

1. 插件加载过程：
   • 当使用 vue create 或 vue add 等命令时，Vue CLI 会查找项目中的 package.json 文件，以及全局安装的 Vue CLI 插件。
   • 对于项目内的插件，它会读取 package.json 中 devDependencies 里以 @vue/cli-plugin- 开头的包。对于全局插件，会从全局安装目录查找。
   • 然后，按照一定顺序加载这些插件，插件会注册其自身提供的命令、生成器、服务扩展等功能。
2. 插件生命周期：
   • apply 阶段：这是插件的入口点，当插件被加载时，apply 函数会被调用，它接收一个 api 对象作为参数。通过这个 api，插件可以注册各种钩子函数、命令等。例如：

module.exports = function (api) {
  api.registerCommand('my-command', () => {
    console.log('My custom command executed');
  });
};

• 生成器钩子：当使用 vue create 命令创建项目时，插件可以注册 generator 钩子。这个钩子允许插件向项目中添加文件、修改配置等。例如：

module.exports = function (api) {
  api.hook('generator', context => {
    // context 包含项目生成相关信息
    context.fs.writeFileSync(
      context.resolve('./src/my - custom - file.js'),
      'console.log("This is a custom file added by the plugin");'
    );
  });
};

• 服务钩子：当使用 vue serve 或 vue build 等命令时，插件可以注册服务相关的钩子。例如 serve 钩子可以用于在开发服务器启动前或启动后执行一些操作：

module.exports = function (api) {
  api.hook('serve:before', server => {
    // server 是开发服务器实例
    console.log('Server is about to start');
  });
};

开发自定义 Vue CLI 插件实现自动化部署

1. 初始化插件项目：
   • 创建一个新的 npm 包，例如 my - vue - cli - plugin - deploy。
   • 在项目目录下初始化 package.json：

npm init -y

2. 编写插件逻辑：
   • 创建一个 index.js 文件作为插件入口。假设使用 ssh2 - client 库来实现通过 SSH 进行自动化部署。

const { Client } = require('ssh2 - client');

module.exports = function (api) {
  api.registerCommand('deploy', async () => {
    const ssh = new Client();
    try {
      await ssh.connect({
        host: 'your - server - host',
        port: 22,
        username: 'your - username',
        password: 'your - password'
      });
      await ssh.exec('cd /var/www/your - project - path && git pull origin master && npm install && npm run build');
      console.log('Deployment successful');
    } catch (e) {
      console.error('Deployment failed:', e);
    } finally {
      ssh.end();
    }
  });
};

3. 发布插件：
   • 将插件发布到 npm 仓库。首先确保你有 npm 账号并登录：

npm login

• 然后发布插件：

npm publish

4. 使用插件：
   • 在目标 Vue 项目中，安装自定义插件：

npm install my - vue - cli - plugin - deploy --save - dev

• 运行自定义命令进行自动化部署：

vue deploy

这样就完成了一个自定义 Vue CLI 插件的开发，实现了自动化部署的功能。