Vue-cli@3.0 插件系统简析

在Vue-cli@3.0之后，Vue-cli的插件系统得到了很大的改进。通过Vue-cli的插件系统，我们可以扩展Vue-cli的能力，定制自己的项目需求。

插件注册

要注册一个Vue-cli的插件，我们需要做以下几个步骤：

1. 创建一个npm包，其中必须包含一个名为generator的文件夹。该文件夹中，必须有一个generator.js文件，它是插件的入口文件。
2. 在generator.js中，需要导出一个对象，该对象至少包含一个prompts属性和一个generator方法。
3. prompts属性用于收集用户输入的信息，它是一个数组，在数组中每个元素代表一个问题，可以设置问题的类型、默认值、提示语等。
4. generator方法将在插件被执行时调用，通过该方法可以在项目中定制文件、添加依赖等。
5. 在插件包的package.json中，设置 vue-cli-plugin-为开头的name字段，以便Vue-cli能够正确识别该插件。
6. 最后，将插件包发布到npm上，即可在项目中使用。

插件使用

想要使用Vue-cli插件，我们只需要在项目中安装该插件，并在vue.config.js文件中进行配置。

1. 安装插件：npm install vue-cli-plugin-xxx
2. 配置插件：在vue.config.js文件中，通过chainWebpack或configureWebpack方法对插件进行配置。

下面以插件vue-cli-plugin-electron-builder为例，进行详细说明：

安装插件

在项目中安装插件vue-cli-plugin-electron-builder：

npm install vue-cli-plugin-electron-builder

配置插件

在vue.config.js文件中，对插件进行配置。

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // electron-builder配置
      }
      // 可以在这里添加其他配置
    },
  },
};

其中，pluginOptions对象下的属性名称为vue-cli-plugin-xxx中的xxx部分，它是用来告诉Vue-cli对哪个插件进行配置的。

在electronBuilder属性下，我们可以对插件vue-cli-plugin-electron-builder进行配置。例如，可以用builderOptions来配置electron-builder。

除了在pluginOptions中配置插件，我们也可以在文件开头通过require加载插件进行配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  chainWebpack: (config) => {
    config.plugin('copy').use(CopyWebpackPlugin, [[{ from: 'src/assets', to: 'dist/assets' }]]);
  },
};

这里通过调用CopyWebpackPlugin插件，实现了将src/assets文件夹下的资源复制到dist/assets文件夹下的功能。

总结

以上就是Vue-cli@3.0插件系统简析的完整攻略。通过插件系统，我们可以很方便地扩展Vue-cli的能力。我们可以创建自己的插件，也可以使用其他人的插件。插件机制也是Vue-cli@3.0中重要的特性之一。