背景
现在很多公司主要业务是c端，拥有巨大用户和流量的同时，b端业务不可或缺，CRM，CMS，运营配置化管理平台，数据可视化平台，各种审批平台。这些系统都有几个共同的特点：需求多，变化快，查询页，列表页，提交页面。而这些页面都是相似的，UI要求低，功能简单。所以我们能不能开发一套配置化平台解放生产力呢？答案是肯定的。我们只需要配置一下Json就能生成一个页面，这个如何实现呢？我们慢慢道来......

技术选型
Nodejs + Vue／React + Json schema

框架搭建

分析：页面只需一个容器，可以理解为一个Div，在加载页面的时候，异步去分布式配置中心（Redis或其他）获取页面配置，页面配置单纯的就是个Json字符串。配置数据取出来之后，我们开始解析Json，包括Json的正确性，合法性等。最后再通过Vue组件的Render方法渲染页面，看到这里，很多人会有如下的疑惑：

1. Json格式如何定义？
2. Json如何和组件对应起来？
3. 组件是怎么渲染出来的？
4. 组件间如何通信？
5. 支持复杂的逻辑交互吗？

框架创新及优化

1.支持无限级组件嵌套渲染

2.简化组件间通信

3.页面配置实时预览

疑问解答

1.Json格式如何定义？

这个没有统一的标准，完全按照个人喜好，给大家展示一下我的定义：

{"uniqueId": "mt-form","attrs": {"style": {"paddingBottom": "15px","paddingLeft": "5px"}}
}

2.Json如何和组件对应起来？ 我们先看一个自定义组件Form.vue的代码：

<template><el-form :label-width="labelWidth" :inline="true" class="mt-form-inline"><slot></slot></el-form>
</template>
<script>
export default {props: ['labelWidth']
}
</script>
<style>
</style>

新建组件库模块ComponentsLib.js，我们把自定义组件通过这个模块暴露出去：

/*** 引入所有公共组件库*/
import Form from './Form.vue'module.exports = {/*** 对外暴露组件，名称id必须唯一*/'mt-form': Form`请输入代码`
}

3.组件是怎么渲染出来的

写了组件和暴露出组件之后，我们怎么渲染出来呢？通过Vue.component定义一个全局组件：

import Vue from 'vue'
import ComponentsLib from './ComponentsLib' // 暴露出来的组件库/*** 注入全局的页面容器组件* 所有组件必须包裹在一个容器组件中*/
Vue.component('page-container', {render: function (createElement) {return this.deepComponents(this.pageConfig, createElement)},methods: {deepComponents (pageConfig, createElement) {if (pageConfig) {return createElement(ComponentsLib[pageConfig.uniqueId], {...pageConfig.attrs}, this.deepChildren(pageConfig.children, createElement))}},/*** 递归遍历所有子组件* @param {} pageConfig* @param {*} createElement*/deepChildren (pageConfig, createElement) {if (!pageConfig) {return createElement('span')}if (pageConfig) {let children = []for (let i = 0; i < pageConfig.length; i++) {let item = pageConfig[i]if (item) {children.push(createElement(ComponentsLib[item.uniqueId], {...item.attrs }, this.deepChildren(item.children, createElement)))}}return children}}},props: {pageConfig: {type: Object,required: true}}
})

可以看出主要的一点，我的组件通过组件库暴露出来，并且每个组件都有一个唯一的ID，而我在Json中配置的时候uniqueId就是对应我组件的唯一ID，这样通过Vue.component的Render方法，可以递归遍历渲染出我的组件，这样就能实现组件的无限级嵌套。

效果预览