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
