Source Integration

This guide explains how to integrate the designer source code into your project.

Getting the Source Code

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

Version Selection:

Choose the corresponding branch and source directory based on your project's tech stack:

Project Type	Branch	Source Path	UI Framework Dependency
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

Source Code Structure

Core directory structure:

src/
├── components/    # Designer components
├── config/       # Configuration items
├── utils/        # Utility functions
├── index.js      # Main entry file

Local Integration Steps

1. Copy the form-create-designer/src directory to your project (recommended location: src/components/FcDesigner), for example:

your-project/
└── src/
    └── components/
        └── FcDesigner/   # Copy here
            ├── components/
            ├── config/
            ├── utils/
            └── index.js

2. Merge the dependencies field from the source package's package.json into your project's package.json.

3. Run npm install again to install dependencies.

Project Configuration

Vue 2 Project Configuration

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

Vue.use(FcDesigner)

Vue 3 Project Configuration

// main.js
import { createApp } from 'vue'
//import FcDesigner from '@form-create/designer'
import FcDesigner from '@/components/FcDesigner'

const app = createApp(App)
app.use(FcDesigner)

Component Usage

<template>
  <fc-designer ref="designer"/>
</template>

<script>
export default {
  mounted() {
    // Access the designer instance
    console.log(this.$refs.designer)
  }
}
</script>