低代码平台自定义组件实现思路

概述

现在低代码开发在企业太常见了，最近公司做的一个低代码平台使用vue3作为技术栈，在需求给出的时候，明确提出提供默认的组件之外，要能够用户自定义组件（业务之内的），当然这个需求肯定是很常见的，以下为具体实现思路。

效果

效果

实现思路

在目前的前端工程化项目中，不管是vue还是react，我们平时开发所写的代码都是一个个.vue或者.tsx文件，然后打包的时候打包工具帮我直接编译了对应的组件，最后生成的函数生成dom，然后我们才能看到最后的页面，如果要实现用户自定义组件，我们的流程应该如下：

上面的重点就在于，如何把用户编写的自定义组件字符串转化成组件对象，然后注册了在页面能够使用

实现

前端工程化里面，我们不用操心这个事情，打包工具借助框架编译器就可以完成这个操作，但是在浏览器环境下我们就需要另外办法

vue3-sfc-loader

这个插件的可以帮我在浏览器环境下，将对应的sfc文件的字符串，编译生成对应的组件对象，因此，我们便可以实现自定义组件的注册。

具体代码

str测试文件如下，真实场景应该为后端获取的字符串

js 复制代码

export const str = `
<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
  background:red;
}
</style>


`
export const templateStr = `
<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
`

compileSfcToComponent.js

js 复制代码

import * as Vue from 'vue'
import * as vue3SfcLoader from "vue3-sfc-loader";
import { str } from "@/constant/index";

export async function compileSfcToComponent(sfcString: string, app: any) {
    return new Promise((resolve, reject) => {
        const { loadModule } = vue3SfcLoader
        loadModule('file.vue', {
        //必填
            moduleCache: {
                vue: Vue//对象就是vue全局暴露的对象
            },
            //必填
            async getFile(url) {
            //返回自定义组件文件，这里通过后端获取
                return sfcString
            },
            //必填（样式相关）
            addStyle(textContent) {
                const style = Object.assign(document.createElement('style'), { textContent });
                const ref = document.head.getElementsByTagName('style')[0] || null;
                document.head.insertBefore(style, ref);
            },
        }).then(res => {
            console.log('component---', res)
            console.log('app', app)
            app.component('SelfCom', res)
            resolve()
        })
    })
}
//注册组件
export async function registerApp(app: any) {
    await compileSfcToComponent(str, app)
}

mian.js

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import { registerApp } from './utils'
const app = createApp(App)
//注意：自定义组件加载完成后，挂载，不然页面不会实时更新
registerApp(app).then(()=>{
    app.mount('#app')
})

App.vue

js 复制代码

<template>
  <div>测试自定义组件</div>
  <SelfCom></SelfCom>
  </div>
</template>

总结

如上操作后，即可实现任意组件自定义，交给用户去操作，当前上面只是其中自定义组件实现的一种方式，还可以直接通过远程加载组件包的形式做也是可以的，对于对应的单文件解析，不管是vue,react，都能找到对应的解析插件帮我处理这个复杂的过程，更多具体的配置，可以自己实时根据情况进行更改。