一篇文章，教你学会Vue CLI 插件开发

什么是Vue CLI 插件？

Vue CLI 插件是一种扩展Vue CLI 工具的方式，它能够为Vue CLI 工具增加各种功能，例如自定义webpack配置、添加插件等。

插件可以在项目创建期间自动安装和使用，也可以在项目创建后手动添加和使用。Vue CLI 社区提供了大量的插件供开发者使用。

开始开发插件之前需要了解的工具和技能

• Vue CLI: 一种基于Vue.js 进行快速开发的系统。

• Node.js: 用来运行JavaScript代码的环境。

• npm: 一个管理JavaScript包的包管理器。

• Git: 一个分布式版本控制系统。

• JavaScript: 插件开发主要使用的编程语言。

• Webpack: 打包和构建Vue.js应用程序的工具。

如果您还不熟悉以上的任何一项技能，可以通过官方文档或在线课程学习相关内容。

Vue CLI 插件开发的步骤

步骤一: 创建插件工程

第一步是创建一个空的目录，并通过 npm init 命令初始化为一个npm 包，这个包就是我们的插件工程。

mkdir your-plugin
cd your-plugin
npm init

步骤二: 添加依赖

创建好插件工程后，需要添加一些 npm 依赖。

Vue CLI插件开发需要依赖以下包：

{
  "devDependencies": {
    "vue-cli-plugin-archiver": "^0.1.0",
    "@vue/cli-shared-utils": "^4.5.9",
    "@vue/cli-service": "^4.5.9"
  }
}

其中， Vue CLI 插件最好以 vue-cli-plugin- 作为名字的前缀。

步骤三: 创建插件

在插件工程的根目录创建一个名为 generator/index.js 的文件，该文件是Vue CLI 插件的主要入口。

在该文件中，通过 module.exports 导出一个继承 Generator 的对象。如下所示：

module.exports = class YourPlugin extends Generator {
  constructor (options) {
    super(options)

    // 插件选项
    this.option('option-name', {
      type: String,
      description: 'option description',
      default: 'default value'
    })
  }

  // 插件安装方法
  install () {
    this._installDependencies()
  }
}

在 constructor() 构造函数中可以定义插件的选项，而在 install() 方法中可以进行插件的安装和配置。

除了 constructor() 和 install() 方法，Vue CLI 插件还提供了许多生命周期钩子，我们可以根据自己的需求实现相应的方法。

步骤四：使用插件

通过如下命令进行插件安装：

vue add your-plugin

在安装插件时，还可以使用 --option-name 来设置插件选项：

vue add your-plugin --option-name option-value

注意，your-plugin 需要替换为你自己的插件名称。

示例一：Vue CLI 插件自定义webpack配置

Vue CLI 插件可以用来自定义webpack配置。我们可以使用 webpack-chain 这个库，通过编写配置文件来完成自定义webpack配置的任务。

安装必要的库：

npm install --save-dev vue-cli-plugin-archiver @vue/cli-shared-utils @vue/cli-service webpack-chain

创建名为 archiver.js 的配置文件并导出一个函数，该函数需要返回一个 webpack-chain 配置对象。

const ArchiverPlugin = require('webpack-archiver-plugin')
const Config = require('webpack-chain')

module.exports = api => {
  const config = new Config()

  config.plugin('archiver')
    .use(ArchiverPlugin, [{
      output: `${api.service.outputDir}.zip`
    }])

  return config
}

最后，通过 Vue CLI Service 注册插件：

module.exports = (api, options) => {
  // 使用 `webpack-chain` 修改webpack配置
  api.configureWebpack(config => {
    config.plugins
      .push(new ArchiverPlugin({
        output: `${api.service.outputDir}.zip`
      }))
  })

  // 插件完整对象:Generator，定义名Archiver
  api.generator.register('Archiver', () => {
    // 定义代码生成逻辑
  })

  // 注册插件命令
  api.registerCommand('archiver', {
    description: 'Generate an archive',

    // 插件命令方法
    action: () => {}
  })
}

这样，我们就成功通过Vue CLI 插件自定义了Webpack配置，并且可以使用 vue-cli-service archiver 命令来进行文件归档。

示例二：Vue CLI 插件添加插件

Vue CLI 插件还可以用来添加其他插件。我们可以使用 dependency-install 这个库，通过编写配置文件完成添加插件的任务。

安装必要的库：

npm install --save-dev vue-cli-plugin-myplugin @vue/cli-shared-utils @vue/cli-service dependency-install

创建名为 index.js 的文件，其中包含以下内容：

const { install } = require('dependency-install')
const prompts = require('./prompts')

module.exports = (api, options) => {
  api.extendPackage({
    dependencies: {
      'vue-router': '^3.4.9'
    }
  })

  api.onCreateComplete(() => {
    install(options, api, {
      packages: ['query-string'],
      useYarn: api.hasPlugin('yarn')
    })
  })

  api.registerCommand('myplugin-command', args => {
    console.log(args)
  })

  api.render('./template', {
    prompts
  })
}

在该文件中，我们使用了 api.extendPackage() 方法来添加依赖 vue-router，使用 install() 方法来安装 queryString 库。此外，我们还创建了一个名为 myplugin-command 的命令。

最后，通过编辑插件工程根目录下的 generator/template 目录中的模板文件来为Vue CLI 插件创建一个可配置的用户界面。

这样我们就成功地为Vue CLI添加了一个插件，并可以使用 vue invoke my-plugin 命令来使用它。

总结

通过以上步骤，我们可以创建、开发和使用Vue CLI 插件，包括自定义Webpack配置和添加插件。Vue CLI插件使得我们可以更方便地扩展Vue CLI 工具的功能，提高开发效率。作为Vue.js开发者，这是非常有用的技能。