在实际项目中，建立一套低代码网站的页面设计器往往会遇到以下痛点：

• 业务方需求千变万化需要在同一套程序中快速实现表单的增删改查、布局自定义还有交互联动。
• 历史配置兼容成本高已有海量的旧版 JSON 配置，如果直接迁移会导致大量数据不兼容或渲染错误。
• 组件维护成本大如果自行实现基础组件库。需要维护大量 Vue 组件，工作量和技术债务都会明显提高。
• 编辑体验不友好缺少所见即所得编辑、拖拽排序还有实时预览功能，导致运营人员调试成本上升。
• 联动逻辑难以 表单之间的事件联动如果硬编码。会导致后期迭代困难，难以满足业务变化很快的需求。

下面基于作者在真实项目中的技术实践，对“如何建立低代码网站的页面设计器”进行完整的方案梳理与实现细节展示。

一、方案概述

方案选型

本方案选用 ——一款以数据为引擎的表单渲染器。之所以选择它，主要基于以下匹配度：

1. 技术栈支持 Vue2 + Element‑UI 与 Vue3 + Element‑Plus。完美契合业务线现有前端框架。其实，
2. 内置丰富的 Element 组件。同时支持自定义组件，免去自行维护大量基础 Vue 组件的工作量。
3. 官方文档友好。每种类型组件的 schema 简洁且语义清晰，上手快。
4. 还有新旧 schema 转换。FormCreate 能自动完成 UI 编排区、配置面板还有预览表单的渲染，极大降低定制化成本。

整体设计

目标是为运营方提供通用且灵活的动态表单配置能力同时兼容旧版配置，不影响海量存量数据展示。话说回来，整体结构如下图所示。再看主要模块包括，

• 物料库基于 FormCreate 的 rule 定义。将模板字段库中的旧 JSON 配置和业务数据转换为统一规范的 rule；若内置组件不足，则自定义并全局注册。
• UI 编排区使用基于 vuedraggable 的 dragBox.vue/dragTool.vue 实现拖拽、移动、删除等操作；拖拽进入后将对应 rule 推入其 children
• 配置面板左侧物料库每个 component 的 schema 中声明可配置属性；选中组件后解析出 props 并生成对应配置表单 JSON，同步更新目标 form rule。说起来，
• 工具栏功能: 导入/导出 JSON、保存至 localStorage、所见即所得预览、发布至后台还有清空重建等常用操作。一键完成全流程，

二、前端执行方法

组件 Rule 定义

所有可视化组件均遵循 FormCreate 的 @type {Rule} 结构。下面以 Element 的 为例展示完整规则：

export type Rule = {
说到type，string;// 如 'input','select' 等
field?的观点是，string，// 数据绑定字段名
说到name?，string，// 唯一标识符
从title?话说回来，来看，string;// 标签文字
再看info?，string，// 提示信息
至于value?，any，// 默认值
native?
话说回来，: boolean;
props，: Object;// 组件属性
从style?来看，string | Object;class，: string | Array;id，: string | Array;on，: { : Function | Function };_on，: Object;hook，: { : Function | Function };slot，: string;key，: string;$required，: boolean | string | Object;老实说，options，: Array;optionsTo，: string;hidden，: boolean;display，: boolean;inject，: boolean | Object;ignore，: boolean | 'hidden';... // 略去其它通用属性
};

Pain point: 在实际开发中。经常因为不同业务对同一属性有不同命名导致 rule 不统一，此时可以统一约定前缀（如 $props_*) 来区分绑定层级，从而在后续同步时只需做一次映射即可。

自定义组件

If FormCreate's built‑in components cannot meet specific needs,you can create custom components following se steps:

1. Create a Vue component with defined @props/@emits.
2. Add it to global component registry.
3. Create a corresponding FormCreate rule:

   
   {
   说到type，'alertConfig',field: '_on',title: '弹窗联动'。props: { comType: name },}
   

4. The custom component will automatically appear in both UI 编排区 and configuration panel.

旧版 JSON 与新 Schema 的适配转换

The system must support legacy configurations. The conversion pipeline includes:

• Pain point: "历史数据迁移成本高". 为了不影响已有业务，需要编写胶水代码将老版 json 中字段映射到 FormCreate 所要求的 rule 格式，并对无法对应的属性提供默认兜底。
• The conversion script reads old json → extracts field definitions → builds a temporary intermediate model → outputs符合 FormCreate 标准的 rule 数组。
• This step保证了“零风险上线”，即使在发布新版本后仍能无缝渲染旧表单。

编排区生成

The drag‑and‑drop area is built on top of . Two core components:

• dragBox.vue: 容器级别，可放置任意子组件；负责合并属性、样式及子节点排序。
• dragTool.vue: 为每个子节点提供移动/复制/删除等操作按钮。并包装成可嵌套结构，以便递归解析 DSL。

配置面板生成与同步到表单 JSON

The right‑side configuration panel reads selected component's schema and renders a secondary FormCreate instance. Key implementation points:

• The schema differentiates 娱乐ween attributes that belong to inner component and those belonging to outer FormItem.
• The change listener updates active rule in real time.
• Pain point – “属性映射混乱”。通过统一使用前缀 可以一次性识别并写回对应位置，大幅降低误操作概率。

// 示例：el-input 对应的属性面板 schema
export default {
props {
return;}
}，

// 更新规则的方法
propChange {
const f = this;if ) {
const attr = key.replace;f.activeRule.props = { ...f.activeRule.props,: value };} else {
f.activeRule = value;}
}

目标表单渲染

The final DSL that drives actual business form must be stripped of all designer‑only metadata . The following recursive function performs clean‑up and slot handling:

/**
* 将设计器内部结构转化为真正用于业务渲染的 DSL
* @param {Array} children - 当前层级 rules
* @param {String} pSlot - 父级 slot 名称
* @returns {Array}
*/
parseRule {
const self = this;
return .reduce => {
let slot = pSlot;// 拖拽容器展开递归
if {
list.push);return list，}
if {
slot = rule.slot || pSlot;// dragTool 包裹唯一子项
const inner = rule.children;if {
list.push);return list，}
rule = inner;}
if return list;// 深拷贝防止副作用
const cleanRule = { ...rule };// slot 填充
if cleanRule.slot = slot;// 子节点递归处理
if {
cleanRule.children = self.parseRule;}
// 删除 Designer 专属字段
delete cleanRule._menu;delete cleanRule._id;delete cleanRule.__uuid;// 移除空属性
cleanRule.props && Object.keys.forEach(k => {
if delete cleanRule.props;})，list.push;return list，

},);}


The cleaned DSL is n bound to a separate `` instance for preview or workflow rendering:


<!-- 渲染最终表单 -->
<FormDesign :rule="finalDsl"
:option="formOptions"
v-model:api="finalApi"
/>



三、关键痛点对策汇总 



P1：多变业务需求 → 可视化拖拽 + 动态 Schema 
使用 FormCreate + vuedraggable。实现“一键生成 DSL”，满足快速迭代需求。




P2：历史 JSON 不兼容 → 中间层转换脚本 
编写统一映射规则。将老版字段平滑迁移到新版 Rule，确保零风险上线。



P3：自定义交互复杂 → 抽象成独立 Vue Component 
将复杂联动逻辑封装为独立插件。再通过 Rule 注册，即可在编辑器和运行时复用。老实说，



P4：编辑体验差 → 所见即所得预览 + 实时同步 
利用 FormCreate 的 change 回调实时更新 DSL。并在右侧即时预览，提高运营人员效率。



 P5 ：冗余元数据导致性能下降 → 清理 DSL 工具函数
在导出阶段递归剔除 Designer 专属字段和空值，仅保留业务必要信息。


更多实战细节请关注后续章节，如「自定义联动事件实现」或「多租户模板管理」等高级主题。欢迎在 GitHub 上交流经验：

GitHub 地址：https://github.com/xaboy/form-create​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​‬​​​‬‬​​​‬​​​​​​​​​​​​​​ ​​​​​ ​​​​​ ​​​​​​‎‎‏‏‏‏‏‏‏‌‍‍‍‌‍‌ ‌‍‌‌‌‌‎ ‎ ‌ ‌ ‎  ‍ ‍‍ ‍‍‌‍‌‮‎‪‪‫‫\u200b\ufeff\ufeff\ufeff\ufeff\ufeff⁢⁢⁢⁣ ⁡⁤⁠⁠︎‿͚͓͈͍͍̣͓̾̈̐̈̉́̃̈̊̍̚͟‎‎‎‎‎‎‎‏‥․.