后台开发中，表单开发是最重复、耗时、繁琐的工作！

手动写布局、写校验、写联动、写提交逻辑，代码冗余度高、复用性差、后期维护极其麻烦。

今天给大家安利一款MIT协议、完全开源免费可商用的低代码表单神器——formCreate！

无需手写繁琐表单代码，JSON配置+可视化拖拽即可快速生成各类复杂业务表单，适配Vue2/Vue3全版本，支持八大主流UI框架，大幅提升后台开发生产力🔥

---

💡 一、项目简介

formCreate 是一款面向企业级后台的低代码动态表单生成组件，专为各类系统表单开发场景设计，开源免费、支持商用、可二次开发、可私有化部署。

系统集成 JSON数据驱动渲染、动态表单生成、数据验证、表单提交、可视化拖拽设计器、移动端适配、多语言国际化、AI表单生成 等全套能力。

仅靠简单JSON配置，即可自动生成完整功能表单，广泛适用于政务系统、OA办公、ERP、电商后台、流程管理、CRM 等各类业务系统开发。

---

🖼️ 功能效果展示

（系统首页概览）

（基础表单渲染效果）

（表单动态渲染演示）

（组件联动交互效果）

（子表单/分组表单效果）

（FcDesigner可视化设计器界面）

---

✨ 二、核心功能亮点

✅ JSON驱动渲染，零代码生成表单

无需手写HTML与JS，仅通过JSON配置即可自动完成表单渲染、数据收集、规则校验、提交交互全流程。表单结构与业务代码完全解耦，后期修改字段、调整布局仅需改动配置，极大降低维护成本，同时支持自定义生成任意Vue组件、HTML标签。

✅ 八大主流UI框架无缝适配

原生兼容 Element Plus、Ant Design Vue、Naive UI、Arco Design、TDesign、Tiny Vue、iView、Vant 八大框架。一套表单配置可跨项目、跨技术栈无缝复用，完美适配多技术栈团队开发场景。

✅ 超丰富组件库，开箱即用

内置20+常用基础表单组件，覆盖90%常规表单场景；可视化设计器拓展至90+高阶组件，包含高级选择、联动组件、附件上传、多级分组等，无需开发者手动封装组件。

✅ 可视化拖拽设计器，零基础上手

自带PC端+移动端双端可视化设计器，拖拽式布局、所见即所得。支持组件条件显隐、数据联动、校验规则联动、动态赋值等高阶功能，无需手写复杂事件逻辑。

✅ 全套表单API，支撑复杂业务

提供完整原生表单API，支持数据获取、赋值、重置、清空、校验等操作。完美适配子表单、嵌套表单、表单分组、动态增删等复杂企业级业务场景。

✅ 自定义组件拓展，自由度拉满

支持自定义注册业务组件、Vue组件、原生HTML标签，自定义组件可像内置组件一样通过JSON配置调用，适配各类个性化定制需求。

✅ AI智能生成表单，开发效率翻倍

集成AI表单助理3.0，输入自然语言需求即可一键生成完整表单结构、字段配置、联动规则、数据回显、校验逻辑。内置Agent Skills，兼容Claude Code、Cursor、Trae、Copilot等主流AI编程工具。

✅ 双向数据绑定 + 国际化 + 双模式切换

支持表单数据双向绑定，数据实时同步；内置中、英、日三国语言，适配国际化项目；支持编辑/阅读双模式无缝切换，一套表单兼顾数据录入与详情展示。

---

🛠 三、系统架构详情

1、项目目录结构

目录名称	功能说明
core	核心引擎，实现 JSON 驱动表单渲染
element-ui	Element Plus 框架适配版本
ant-design-vue	Ant Design Vue 框架适配版本
antdv-next	Antdv Next 框架适配版本
arco-design	Arco Design 框架适配版本
naive-ui	Naive UI 框架适配版本
tdesign	TDesign 框架适配版本
tiny-vue	TinyVue（OpenTiny）适配版本
vant	Vant 移动端框架适配版本
designer	PC端可视化表单设计器
vant-designer	移动端表单设计器
iview / view-design	Vue2 版本框架适配

2、核心技术栈

技术分类	技术详情
前端框架	Vue 2、Vue 3 全版本兼容
适配UI框架	8大主流Vue UI框架全覆盖
校验引擎	async-validator 专业表单校验
设计工具	FcDesigner 双端可视化设计器
AI能力	Agent Skills 适配主流AI编程工具

---

📝 四、极速上手教程（Element Plus示例）

1、安装依赖

操作步骤	执行代码
安装框架对应依赖	npm install element-ui@next

2、全局注册组件

操作步骤	执行代码
全局引入并注册	import formCreate from 'element-ui'app.use(formCreate)

3、页面完整使用示例

功能说明	完整代码示例
表单配置、渲染、提交	import { maker } from 'element-ui' export default { data() { return { fApi: {}, rule: [ maker.input('商品名称', 'goods_name'), maker.date('创建日期', 'created_at') ], option: { onSubmit(formData) { console.log(formData) } } } } }

---

🎯 五、适用场景

✅ Vue2/Vue3 全版本后台项目快速开发表单

✅ OA、ERP、CRM、政务系统、电商后台表单搭建

✅ 多UI框架项目统一表单解决方案

✅ 低代码平台、流程审批系统、数据填报系统开发

✅ 需要私有化部署、个性化二次开发的企业项目

---

写在最后

formCreate 作为MIT开源免费商用的低代码表单组件，零成本、高兼容、强拓展、易上手，完美解决传统表单开发繁琐、复用性差、维护成本高的痛点，是Vue后台开发的必备效率神器🔥

百度
链接: https://pan.baidu.com/s/1ALO6XVRS35PnnbiaxQUZ7A?pwd=8888 
提取码: 8888


夸克
链接：https://pan.quark.cn/s/a832b2d6c6a9?pwd=nakW
提取码：nakW

---

免责声明

本文分享的 formCreate 组件及相关源码、资源均来源于公开开源社区，项目遵循官方开源协议（MIT），所有内容仅作技术学习、研究交流使用，禁止用于违规、违法及商业侵权场景。

所有用户在下载、部署、二次开发及使用本项目过程中，需自行遵守对应开源协议及国家法律法规，自主承担使用过程中产生的一切风险、责任与后果，本平台不承担任何连带法律责任。

我们充分尊重原作者知识产权与开源生态，内容均为公开资源整理汇编。若文中存在版权信息遗漏、标注不当等问题，版权方可随时联系我方，将第一时间核实、更正、删除相关内容。

本文仅做技术分享，不保证开源软件的绝对安全性、完整性与适用性，不对使用本项目引发的任何直接或间接数据损失、业务风险承担相关责任。

凡通过本文获取资源的使用者，均视为已阅读、理解并自愿接受本免责声明全部条款。