Element3开发内幕 – Vue CLI插件开发

官方开发指南 cli.vuejs.org/zh/dev-guid…

我们团队的Element发布了。为了让大家使用起来便捷。需要加入vue-cli和vite生态之中。

今天先说说vue-cli插件如何开发。

大家可以尝试一下先

vue create vue3-demo
vue add element3

一、什么是Vue CLI插件

Vue CLI工具是Vue生态在Vue生态中负责工具基础标准化。他使用一套基于插件的架构。

比如vue-router、vuex或者安装组件库等都可以通过插件的形式安装。

vue add 的设计意图是为了安装和调用 Vue CLI 插件。

# 插件安装
vue add vuex

一个vue add xxx就搞定了。

二、功能实现

1. 搭建框架

1.1 初始npm库

为了让一个 CLI 插件在 Vue CLI 项目中被正常使用，它必须遵循 vue-cli-plugin-<name> 或者 @scope/vue-cli-plugin-<name> 这样的命名惯例。这样你的插件才能够：

• 被 @vue/cli-service 发现；

也就是说我们只需要将npm库的名字命名为 vue-cli-plugin-element3

这样只要最后提交到npm仓库后 ，我们通过

vue add element3

就可以安装插件了

mkdir vue-cli-plugin-element3
npm init -y

2. 安装配置命令行交互

在安装插件前通常会通过命令行交互形式，选择一下安装参数：

比如Element中需要询问

• 是否全局安装

  

• 是否使用sass？

  

这个功能是使用通过 inquirer 实现。其实你自己写一个cli工具一般也会用这个功能

在这里面我们只需要编辑一下 prompts.js文件就可以了。具体配置可以参考 inquirer

module.exports = [
  {
    type: 'list',
    name: 'import',
    message: 'How do you want to import Element3?',
    choices: [
      { name: 'Fully import', value: 'full' },
      { name: 'Import on demand', value: 'partial' }
    ],
    default: 'full',
  },
  {
    when: answers => answers.import === 'full',
    type: 'confirm',
    name: 'customTheme',
    message: 'Do you wish to overwrite Element\'s SCSS variables?',
    default: false,
  },
]

3. 代码生成器Generator

添加element3组件库的主要功能集中在生成器上。生成器的作用就是

• 修改已有代码
• 添加代码
• 添加依赖
• 其他功能（比如babel配置）

如果手工添加Element3库大概需要以下步骤：

• npm添加依赖库
• 以vue plugin形式添加组件库
• main.js引用组件库
• App.vue中写一个代码例子 比如： 引用一个按钮 确认安装效果

3.1 添加依赖

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

这个功能其实就是调用cli提供的api就可以实现了。

3.2 添加插件

添加插件的过程其实就是需要添加/plugins/element.js文件

生成代码通常会使用模板引擎渲染方式，过程类似后端代码渲染，常用的库有ejs模板和hbs模板

cli工具中要求我们使用ejs模板。

如果想了解模板引擎实现原理 请看这篇【天天造轮子 – 模板引擎】](juejin.cn/post/688413…)

首先定义模板

// 部分节选
<%_ if (options.import === 'full') { _%>
import Element3 from 'element3'
<%_ if (options.customTheme) { _%>
import '../element-variables.scss'
<%_ } else { _%>
import 'element3/lib/theme-chalk/index.css'
<%_ } _%> 
<%_ if (options.lang !== 'en') { _%>
import locale from 'element3/lib/locale/lang/<%= options.lang %>'
<%_ } _%>
<%_ } else { _%>
import { ElButton } from 'element3'
import 'element3/lib/theme-chalk/index.css'
<%_ if (options.lang !== 'en') { _%>
import lang from 'element3/lib/locale/lang/<%= options.lang %>'
import locale from 'element3/lib/locale'
<%_ }} _%>

export default (app) => {
  <%_ if (options.import === 'full') { _%>
  <%_ if (options.lang !== 'en') { _%>
  app.use(Element3, { locale })
  <%_ } else { _%>
  app.use(Element3)
  <%_ } _%>
  <%_ } else { _%>
  <%_ if (options.lang !== 'en') { _%>
  locale.use(lang)
  <%_ } _%>
  app.use(ElButton)
  <%_ } _%>
}

调用模板引擎渲染

这里面还是使用api提供的render方法 其实就是ejs模板引擎

api.render({
    './src/plugins/element.js': './templates/src/plugins/element.js.ejs',
  })

3.3 添加插件引用

添加插件引用相当于在main.js文件中增加内容

这个程序逻辑比较简单 ，只需要通过简单的文件操作+正则就可以完成。

如果是复杂功能还需要借助AST抽象语法树完成。这个后续章节有介绍。

api.afterInvoke(() => {
    const { EOL } = require('os')
    const fs = require('fs')
    const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
    const lines = contentMain.split(/\r?\n/g)

    const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)\.mount\('#app'\)/))
    lines[renderIndex] = `const app = createApp(App)`
    lines[renderIndex + 1] = `installElement3(app)`
    lines[renderIndex + 2] = `app.mount('#app')`

    fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' })
  })

3.4 添加代码示例

这个功能还是通过代码模板渲染代码。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element3 is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button type="primary">el-button</el-button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>

<style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

api.render({
    './src/App.vue': './templates/src/App.vue.ejs'
})

4. Service处理

service的会在启动服务时运行。我们这里就小小的秀一下Logo。

我们使用figlet + chalk完成

const figlet = require('figlet')
const chalk = require('chalk')

module.exports = () => {
    console.log(chalk.yellow(figlet.textSync('Element 3', {
        font: 'big',
        horizontalLayout: 'default',
        verticalLayout: 'default',
        width: 80,
        whitespaceBreak: true
    })));
}

三、本地调试

在没有上传npm前需要，本地安装，方法如下：

# 再次安装依赖
yarn
npm install --save-dev file:/Users/xiaran/source/hug-sun/vue-cli-plugin-element3
vue invoke vue-cli-plugin-element3

四、上传npm仓库

上传仓库就是执行npm publish就行了。只不过要注意需要更改镜像仓库。上传完后再改回来。

#!/usr/bin/env bash
npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录相关操作：'
npm login # 登陆
echo "-------publishing-------"
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像
echo "发布完成"
exit

年轻人要讲武德！！！点赞、关注、收藏都要安排起来！！！

🔥公众号搜索：【前端大班车】 获取更多 Element3开发内幕教程

• 这是我们花果山前端团队的开源项目 element3
• 一个支持 vue3 的前端组件库