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

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

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

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

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

你们能够尝试一下先

vue create vue3-demo
vue add element3
复制代码

1、什么是Vue CLI插件

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

好比vue-router、vuex或者安装组件库等均可以经过插件的形式安装。

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

# 插件安装
vue add vuex
复制代码

一个vue add xxx就搞定了。

2、功能实现

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
    })));
}

复制代码

3、本地调试

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

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

4、上传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 的前端组件库