企业官网建设流程全解析

form-create-designer快速上手：从安装到运行第一个设计器的3步极简教程

【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。支持PC端和移动端，目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer

form-create-designer 是一个好用的 Vue 低代码可视化 AI 表单设计器（FcDesigner），通过拖拽方式快速创建表单，支持 PC 端和移动端，已广泛应用于政务、OA、ERP、电商等系统。本教程只需 3 步，就能帮你从安装依赖到运行第一个可视化表单设计器，5 分钟即可完成。

30秒了解：它能帮你做什么？

✅ 拖拽式生成表单，告别手写大量表单项代码 ✅ 内置 40+ 常用表单与布局组件（输入框、日期、表格、签名等） ✅ 表单直接以 JSON 输出，前后端分离开发友好 ✅ 支持事件配置、表单验证、多语言与 AI 表单助理 ✅ 一套生态覆盖多端：Element Plus 版、Ant Design Vue 版、Vant 移动端版

它的核心是一个<fc-designer>组件，组件入口位于 FcDesigner.vue，整个设计器的插件注册逻辑见 index.js。

第一步：安装依赖

以 PC 端 Element Plus 版为例，只需安装 3 个 npm 包：

npm install @form-create/designer@next npm install @form-create/element-ui@next npm install element-plus

💡 需要源码阅读或二次开发时，可先克隆仓库：git clone https://gitcode.com/xaboy/form-create-designer

如果是移动端（Vant）项目，则安装@form-create/vant-designer@next与@form-create/vant@next，组件说明详见 vant 包文档。

第二步：注册 FcDesigner 插件

在 Vue 3 入口文件（如main.js）中注册 UI 库与设计器，参考仓库中的官方示例 examples/main.js：

import {createApp} from 'vue'; import ELEMENT from 'element-plus'; import 'element-plus/dist/index.css'; import formCreate from '@form-create/element-ui'; import FcDesigner from '@form-create/designer'; import App from './App.vue'; const app = createApp(App); app.use(ELEMENT); app.use(formCreate); app.use(FcDesigner); app.mount('#app');

注册完成后，fc-designer标签即可在任意页面中使用。

第三步：使用<fc-designer>组件

在模板中放一行组件，设计器就出来了：

<fc-designer ref="designer"/>

此时你会看到完整的三栏设计器界面：左侧组件列表（可拖拽）、中间画布（表单预览与拖放区）、右侧配置面板（字段属性、验证、事件、样式）。内置的组件菜单与拖拽规则定义在 config/menu.js 和 config/index.js。

拿到表单数据同样简单，通过 ref 调用 API 即可：

• getRule()/getOption()：获取表单规则与配置
• setRule()/setOption()：导入已有表单
• getJson()：一键导出 JSON 规则

const rule = this.$refs.designer.getRule(); console.log('表单规则：', rule);

想直接跑起来？本地启动示例工程

仓库内置了可运行的示例，根目录 package.json 提供了脚本命令：

pnpm install pnpm dev:ele # 启动 Element Plus 版 pnpm dev:vant # 启动 Vant 移动端版 pnpm dev:antd # 启动 Ant Design Vue 版

启动后浏览器会自动打开设计器演示页，可以体验导入/导出 JSON、生成组件代码等完整流程，示例页面源码位于 examples/App.vue。

三个版本怎么选？

常见问题 FAQ

Q：安装后<fc-designer>不渲染？检查是否同时注册了formCreate和FcDesigner两个插件，且 FormCreate 版本 ≥ 3.2.24（版本校验逻辑见 index.js）。

Q：如何自定义组件菜单？使用FcDesigner.addMenu()和FcDesigner.addDragRule()即可扩展，方法注册见 index.js。

Q：设计器生成的 JSON 怎么用？拿到rule和option后，用<form-create>渲染即可，无需再写表单项代码。

总结

🎉 恭喜！你已经完成了 form-create-designer 的 3 步安装：

1. 安装 3 个 npm 依赖
2. 在入口注册插件
3. 模板中放入<fc-designer>

接下来不妨试着拖出 5 个组件，生成你的第一个 JSON 表单规则，体验低代码带来的效率提升 👍

【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。支持PC端和移动端，目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer