FcDesigner

Appearance

Element UI Desktop Form Designer ​

FcDesigner is a low-code visual form designer for Vue 2.7. Build forms quickly with drag-and-drop to boost productivity and save time. Used across government systems, OA platforms, ERP systems, e-commerce sites, and workflow management tools.

Built on Vue 2.7 and Element UI. Features built-in multi-language support, extensible architecture, and custom component capabilities.

Installation ​

Install @form-create/designer via npm:

sh
npm install @form-create/designer@^1
npm install @form-create/element-ui@^2.7
npm install element-ui

To update an existing renderer installation:

shell
npm update @form-create/element-ui@^2.7

Check your Vue version. If it's below 2.7, upgrade:

shell
npm update vue@^2.7

Import ​

Node.js Import

For Node.js projects, install dependencies via npm, then import and configure:

js
import Vue from 'vue';
import FcDesigner from '@form-create/designer';
import ELEMENT from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Use Element UI
Vue.use(ELEMENT);
// Use form-create and designer
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);

CDN Import

To import FcDesigner via CDN, include Vue.js and Element UI first, then add @form-create/element-ui and @form-create/designer:

html
<!-- Include Vue.js -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- Include Element UI styles -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Include Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- Include form-create and designer -->
<script src="https://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    Vue.use(FcDesigner);
    Vue.use(FcDesigner.formCreate);
    new Vue().$mount('#app');
</script>

Usage ​

Use the fc-designer component in a Vue component:

vue
<template>
    <fc-designer ref="designer" height="100vh" />
</template>