一个仓库三大版本：form-create-designer 的 Element Plus、Ant Design Vue 与 Vant 移动选型指南
【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。支持PC端和移动端，目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer
form-create-designer 是一个基于 Vue 的低代码可视化 AI 表单设计器（FcDesigner），通过拖拽方式快速创建表单，输出 JSON 数据驱动页面渲染。它最有意思的一点是：同一个仓库里同时维护了 Element Plus、Ant Design Vue 和 Vant 三大版本。选哪个？怎么用？本文给你一份清晰的选型指南。
📦 三大版本速览
三个版本对应仓库packages/目录下的三个子包，统一由 pnpm + Lerna 管理（见 pnpm-workspace.yaml 和 lerna.json），当前版本均为3.5.0：
| 版本 | npm 包名 | 目录 | 适配 UI 库 | 适用场景 |
|---|---|---|---|---|
| Element Plus 版 | @form-create/designer | packages/element-ui | element-plus 2.x | PC 后台、默认首选 |
| Ant Design Vue 版 | @form-create/antd-designer | packages/ant-design-vue | ant-design-vue 4.x | Ant Design 体系的 PC 项目 |
| Vant 移动端版 | @form-create/vant-designer | packages/vant | vant 4.x | 移动端 / H5 表单 |
三版能力同源：内置 30~40+ 常用表单与布局组件、支持子表单、事件配置、样式配置、表格布局、表单验证、多语言，并且都内置了AI 表单助理（根据自然语言描述自动生成或修改表单规则，源码见 packages/element-ui/src/components/ai/AiPanel.vue）。
🗂️ 仓库结构：一个 Monorepo 维护三个产品
根目录的 package.json 里只有一组脚本，通过 Lerna 按包切换：
dev:ele：启动 Element Plus 版设计器dev:antd：启动 Ant Design Vue 版设计器dev:vant：启动 Vant 移动端设计器build：构建全部三个包
这种结构带来两个好处：
- 核心逻辑同步演进：拖拽画布、结构树、事件/函数编辑、AI 面板等公共组件（如 FcDesigner.vue、StructTree.vue）在三个版本间保持同版本迭代，升级一次三端受益；
- 组件菜单各自独立：每个包在
src/config/rule/下维护自己的组件规则，例如 Element 版有 button.js、upload.js，Vant 版则针对移动端提供 stepper.js、uploader.js、calendar.js 等组件。
🎯 三个版本分别适合谁
Element Plus 版：PC 端默认选择
- 基于 packages/element-ui/package.json，依赖
element-plus ^2.11.1； - 组件数量最多（40+），是 README 中主推的版本，也是唯一在 README.md 中说明同时兼容 Vue2 / Vue3 的版本，适合存量 Vue2 项目平滑升级；
- 使用标签：
<fc-designer />； - 如果你的技术栈没有历史包袱，直接选它，文档和演示最完善。
Ant Design Vue 版：antd 生态的 PC 项目
- 基于 packages/ant-design-vue/package.json，依赖
ant-design-vue ~4.2.6； - 组件清单面向 antd 风格做了适配（30+），设计器界面与你的 Ant Design 后台系统视觉一致，不会出现"风格割裂"；
- 使用标签同样是
<fc-designer />，API 与 Element 版基本对齐； - 判断标准很简单：你的项目 UI 库是 antd，就选这一版，表单字段、表格、上传等组件会天然沿用 antd 的交互习惯。
Vant 版：移动端 / H5 表单
- 基于 packages/vant/package.json，依赖
vant ^4.9.7； - 使用独立标签
<fc-designer-mobile />，拖出的组件（步进器、上传、日历、图标、NoticeBar 等）都是移动端交互形态； - 一个小细节：移动端版本同时依赖 element-plus——因为配置面板等设计器 UI 仍用 Element Plus 实现，Vant 负责的是表单渲染预览。安装时别漏装；
- 适合 App 内嵌 H5、微信小程序 Webview、移动端审批与信息采集场景。
🚀 快速安装步骤
1. 业务项目集成（按需选择其一）
# Element Plus 版 npm install @form-create/designer @form-create/element-ui element-plus # Ant Design Vue 版 npm install @form-create/antd-designer @form-create/ant-design-vue ant-design-vue # Vant 移动端版 npm install @form-create/vant-designer @form-create/vant vant @form-create/element-ui element-plus安装后在应用中注册插件，然后在模板里写<fc-designer />（移动端为<fc-designer-mobile />）即可打开设计器。
2. 源码开发 / 二次扩展
git clone https://gitcode.com/xaboy/form-create-designer cd form-create-designer pnpm install pnpm dev:ele # 或 dev:antd / dev:vant✅ 选型决策清单
按顺序回答 3 个问题即可定版：
- 目标端是手机还是电脑？移动端 → Vant 版；PC 端 → 继续第 2 步；
- 项目 UI 库是什么？已用 ant-design-vue → Ant Design Vue 版；已用 element-plus → Element Plus 版；
- 全新项目？推荐 Element Plus 版，组件最全、生态成熟、兼容 Vue2/3。
💡 提示：同一套表单 JSON 在不同版本间可复用字段定义，但组件类型绑定各自 UI 库，建议每个端维护一份设计稿，而不是跨版本直接拷贝。
🔧 三个版本共有的进阶能力
- 扩展自定义组件：通过
FcDesigner.addMenu()与FcDesigner.addDragRule()向设计器注入自定义组件（入口逻辑见 packages/element-ui/src/index.js）； - AI 表单助理：用自然语言生成/修改表单规则，三个版本均已内置（packages/vant/src/components/ai/）；
- 表单多语言：通过 LanguageConfig.vue 配置，适合面向海外用户的系统；
- JSON 驱动：设计结果就是一段 JSON，可直接存储下发，配合 form-create 运行时渲染，实现"设计-存储-渲染"闭环。
一句话总结：PC 新项目选 Element Plus 版，antd 体系选 Ant Design Vue 版，移动端选 Vant 版——同一个仓库、同一套 API 思路，按 UI 库对号入座即可。
【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。支持PC端和移动端，目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
