低代码核心思想:插件化开发(vue3实现)

我们在开发一些组件插件的时候,需要动态的从外部去注入第三方插件

1. 如何做一个插件化的项目,模拟代码如下

ts 复制代码
// 插件设计内容
// 1. 插件底座
// 2. 插件注册方式
// 3. 调用插件
class Calculator{
    // 插件底座
    plugins = []

    constructor(){

    }
    // 注册
    use(plugin){
        this.plugins.push(plugin)
        this[plugin.name] = plugin.fn
    }
}
// 设置两个插件
const AddPlugin = {
    name : 'add',
    fn: function (a, b){
        return a + b 
    }
}

class MinusPlugin{
    name = 'minus';
    fn(a, b) {
        return a- b
    }
}

const caculator = new Calculator()
// 把插件应用到组件中
caculator.use(AddPlugin)
caculator.use(new MinusPlugin())
// 使用插件
console.log(caculator.add(1, 2))
console.log(caculator.minus(2, 1))
console.log(caculator['add'](2, 1))

2. 有了以上的认识,我们开始制作插件

  1. 准备两个vue组件, 用于渲染的插件
    components/MyButton.vue
ts 复制代码
<template>
  <div class="">
    <button>btn</button>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

components/MyText.bue

ts 复制代码
<template>
  <div class="">mytest</div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>
  1. 制作插件底座
    setup.ts
ts 复制代码
import type { App } from 'vue'
import MyButton from './components/MyButton.vue'
interface BlockType{
    type: string,
    meterial: any,
}
// 先定义好自己已有的组件,添加进去
const baseBlocks = [
    {
        type: 'mybutton',
        meterial: MyButton
    }
]

class BlockSuite {
    public blocks = baseBlocks
    getBlocksMap(){
        return Object.fromEntries(this.blocks.map((block) => [block.type, block]))
    }

    getBlocks(){
        return this.blocks
    }

    // 可以添加第三方插件
    addBlock(block: any){
        this.blocks.push(block)
    }

    hasBlock(type: string){
        return !!this.getBlocksMap()[type]
    }
}

const blockSuite = new BlockSuite()


export const setup = (list: BlockType[], app: App<Element>) => {
    list.map((block) => {
        blockSuite.addBlock(block)
    })
    const blocksMap = blockSuite.getBlocksMap()
    const ins = {
        install(app: App<Element>) {
            app.config.globalProperties.$blocksMap = blocksMap
        }
    }

    app.use(ins)
}
  1. main.js 里面调用setup
ts 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import { setup } from './setup'

// 第三方插件
import MyText from './components/MyText.vue'

const app = createApp(App)

// 插入第三方库
setup([{type: 'mytext',meterial: MyText}],app)

app.mount('#app')
  1. 最后,我们可以在组件里面使用插件
    App.vue
ts 复制代码
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const {proxy}: any = getCurrentInstance()
const blocksMap = proxy.$blocksMap
</script>
<template>
  <div>
      <component :is="blocksMap['mybutton'].meterial"></component>
      <component :is="blocksMap['mytext'].meterial"></component>
  </div>
</template>

<style scoped>
</style>
相关推荐
Mikey_n9 分钟前
前台调用接口的方式及速率对比
前端
周之鸥14 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉20 分钟前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导31 分钟前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow38 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷43 分钟前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试1 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog1 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella25211 小时前
10前端项目----商品详情页/滚轮行为
前端
阑梦清川1 小时前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库