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

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

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

获取源码

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

版本选择：

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

源码结构说明

核心目录结构：

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>