尧图网页设计 
一个仓库三大版本form-create-designer 的 Element Plus、Ant Design Vue 与 Vant 移动选型指南【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designerform-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/designerpackages/element-uielement-plus 2.xPC 后台、默认首选Ant Design Vue 版form-create/antd-designerpackages/ant-design-vueant-design-vue 4.xAnt Design 体系的 PC 项目Vant 移动端版form-create/vant-designerpackages/vantvant 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.jsVant 版则针对移动端提供 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.jsAI 表单助理用自然语言生成/修改表单规则三个版本均已内置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），仅供参考 一个仓库三大版本：form-create-designer 的 Element Plus、Ant Design Vue 与 Vant 移动选型指南
一个仓库三大版本form-create-designer 的 Element Plus、Ant Design Vue 与 Vant 移动选型指南【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designerform-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/designerpackages/element-uielement-plus 2.xPC 后台、默认首选Ant Design Vue 版form-create/antd-designerpackages/ant-design-vueant-design-vue 4.xAnt Design 体系的 PC 项目Vant 移动端版form-create/vant-designerpackages/vantvant 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.jsVant 版则针对移动端提供 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.jsAI 表单助理用自然语言生成/修改表单规则三个版本均已内置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），仅供参考