在项目中集成开源的表单设计器FcDesigner源码

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

获取源码

git clone https://github.com/xaboy/form-create-designer.git
cd form-create-designer
npm install

版本选择：

根据项目使用的技术栈选择对应分支和源码目录：

项目类型	分支	源码路径	UI框架依赖
Vue 2	master	form-create-designer/src	element-ui
Vue 3	next	form-create-designer/packages/element-ui/src	element-plus
Vue 3	next	form-create-designer/packages/ant-design-vue/src	ant-design-vue
Vue 3	next	form-create-designer/packages/vant/src	vant

源码结构说明

核心目录结构：

src/
├── components/    # 设计器组件
├── config/       # 配置项
├── utils/        # 工具函数
├── index.js      # 主入口文件

本地集成步骤

1. 将 form-create-designer/src 目录复制到您的项目（建议放在 src/components/FcDesigner 目录），例如：

your-project/
└── src/└── components/└── FcDesigner/   # 复制到这里├── components/├── config/├── utils/└── index.js

修改项目配置

Vue 2 项目配置

// main.js
import Vue from 'vue'
//import FcDesigner from '@form-create/designer'
import FcDesigner from '@/components/FcDesigner'Vue.use(FcDesigner)

Vue 3 项目配置

// main.js
import { createApp } from 'vue'
//import FcDesigner from '@form-create/designer'
import FcDesigner from '@/components/FcDesigner'const app = createApp(App)
app.use(FcDesigner)

组件使用

<template><fc-designer ref="designer"/>
</template><script>
export default {mounted() {// 访问设计器实例console.log(this.$refs.designer)}
}
</script>