从零到一--vue-cli插件

基本介绍

CLI插件是为Vue-CLI项目提供额外功能的npm包，功能包括：修改项目webpack配置、添加新的vue-cli-service命令、扩展package.json、新建或修改文件、提供特定选项等。插件的名称需要是vue-cli-plugin-<name> 或者 @scope/vue-cli-plugin-<name>格式，以便插件被发现。一个CLI插件的功能实现主要在Generator、Service和prompts三部分中。

Generator

• 位置：在 CLI 插件内部，generator 应该放在 generator.js 或者 generator/index.js 文件中。
• 作用：一个generator接收GeneratorAPI实例、插件选项和整个preset为参数。在generator中作者可以用api.render添加文件，也可以用YAML编辑已经存在的模板。

Service

• 位置：根目录的index.js文件
• 作用：一个service接收一个PluginAPI实例和一个包含vue.config.js内指定的项目本地选项对象。它可以用来修改webpack配置、添加和修改cli-service命令、为命令指定模式。

prompts

• 位置：根目录下的prompts.js文件
• 作用：文件返回一个问题数组，在初始化插件时会对用户进行提问，用户的答案会被作为选项传入generator中。

实现一个vue-cli插件

• 实现功能：根据用户选择自动全部或按需引入echarts，并关心用户。
• 文件目录

• prompts.js

module.exports = [
   // 全部还是按需引入echarts
  {
    type: 'list',
    name: 'import',
    message: 'How do you want to import Echarts?',
    choices: [
      { name: 'Fully import', value: 'full' },
      { name: 'Import on demand', value: 'partial' }
    ],
    default: 'full',
  },
  // 关心用户
  {
    type: 'list',
    name: 'personal',
    message: 'How is your day?',
    choices: [
      { name: 'Great', value: 'great'},
      { name: 'Awful', value: 'awful'}
    ]
  }
]

• generaor\index.js

module.exports = (api, opts, rootOptions) => {
  api.extendPackage({
    dependencies: {
      'echarts': '^5.1.2'
    }
  })

  api.injectImports(api.entryFile, `import './plugins/charts.js'`)

  api.render({
    './src/plugins/charts.js': './template/src/plugins/charts.js',
    './src/App.vue': './template/src/App.vue'
  })

}

• generator\template\src\plugin\charts.js

import Vue from 'vue'

<%_ if (options.import === 'full') { _%>
import * as echarts from 'echarts';
<%_ } else { _%>
import * as echarts from 'echarts/core';
import {
    BarChart
} from 'echarts/charts';
echarts.use(
    [ BarChart ]
);
<%_ } _%>
  
Vue.prototype.$echarts = echarts

• 完整项目可以在github上查看，也可以通过vue add charts进行安装