使用vue2实现在线创建组件的功能

前言

我们使用vue2构建了一个项目，项目有个需求：用户可以在线创建vue组件，创建后的组件可以动态编译，项目无需重新部署，就可以在表单等位置引入使用组件。

实现记录

引用vue的esm包

项目中引入vue的代码，原来是

import Vue from 'vue'

改为

import Vue from 'vue/dist/vue.esm'

vue.config.js中配置允许运行时编译组件

开发vue组件创建页面

开发一个页面，支持录入vue组件的代码，包括组件的template部分和JavaScript部分，如下图。

录入的组件代码需要后台服务的支持，将组件作为一条数据存入数据库中。

开发一个动态渲染vue代码的组件

开发一个组件，从后台服务读取上一步创建的vue代码，包括template和javascript两部分，使用下面的代码进行动态渲染。

<component :is="componentFile" v-on="$listeners" v-bind="$attrs"></component>

const errorComponent = {
  template: '<div>组件渲染失败</div>'
}
export default {
  props: {
    componentTemplate: String, // 上一步创建组件的template部分
    componentJavascript: String, // 上一步创建组件的javascript部分
  },
  data() {
    return {
      componentFile: null, // 定义一个动态组件
    }
  },
  created() {
    try {
      // 动态编译
      const componentTemplate = eval("(" + this.componentTemplate + ")")
      const componentJavascript = eval("(" + this.componentJavascript + ")")
      this.componentFile = Object.assign(componentTemplate, componentJavascript)
    } catch (err) {
      console.error("组件渲染失败，错误信息：" + err);
      this.componentFile = errorComponent
    }

  }
}

运行效果

以上功能的完整示例可以在云程低代码平台 （云程 | 云程低代码平台）里的在线组件库中进行体验。