有哪些做家教网站网站设计平台 动易
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 # 主入口文件
本地集成步骤
- 将
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>