源码集成

本篇介绍如何在自己的项目中集成设计器的源码

获取源码

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>