低代码核心思想:插件化开发(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>
相关推荐
ss273几秒前
基于Springboot + vue实现的高校大学生竞赛项目管理系统
vue.js·spring boot·后端
洗刷先生14 分钟前
uniapp 文件查找失败:main.js
前端
前端小巷子15 分钟前
JS 打造仿腾讯影视轮播导航
前端·javascript·面试
2501_9159214319 分钟前
前端开发工具有哪些?常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
知否技术31 分钟前
别再踩坑了!这份 Vue3+TypeScript 项目教程,赶紧收藏!
前端·typescript
IT_陈寒34 分钟前
JavaScript 2024:10个颠覆你认知的ES新特性实战解析
前端·人工智能·后端
meng半颗糖44 分钟前
JavaScript 性能优化实战指南
前端·javascript·servlet·性能优化
EndingCoder1 小时前
离线应用开发:Service Worker 与缓存
前端·javascript·缓存·性能优化·electron·前端框架
遗憾随她而去.1 小时前
css3的 --自定义属性, 变量
前端·css·css3
haogexiaole3 小时前
vue知识点总结
前端·javascript·vue.js