vue3 使用FcDesigner生成一个文档
一、版本选择
根据项目使用的 UI 框架选择对应版本：
| 版本包名 | UI 框架 | 适用场景 |
|---|---|---|
@form-create/designer | Element Plus | PC 端管理系统（Vue 3） |
@form-create/antd-designer | Ant Design Vue | 企业级后台应用 |
@form-create/vant-designer | Vant 4 | 移动端 H5/小程序 |
本文以Element Plus 版本（Vue 3）为例进行说明。
二、安装依赖
# 安装设计器 Vue3 版本 npm install @form-create/designer@^3 # 安装对应的 form-create 渲染器 npm install @form-create/element-ui@^3 # 安装 Element Plus npm install element-plus如已安装旧版本，请更新：
npm update @form-create/element-ui@^3三、引入配置
方式 1：Node.js / 模块化引入（推荐）
在main.js或main.ts中：
import { createApp } from 'vue'; import App from './App.vue'; import FcDesigner from '@form-create/designer'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); // 1. 挂载 Element Plus app.use(ElementPlus); // 2. 挂载 FcDesigner（会自动注册 fc-designer 组件） app.use(FcDesigner); // 3. 挂载 form-create 渲染器（用于表单渲染） app.use(FcDesigner.formCreate); app.mount('#app');方式 2：CDN 引入
在 HTML 文件中直接引入：
<!DOCTYPE html> <html> <head> <!-- Element Plus 样式 --> <link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" /> </head> <body> <div id="app"> <fc-designer height="100vh"></fc-designer> </div> <!-- Vue 3 --> <script src="https://unpkg.com/vue"></script> <!-- Element Plus --> <script src="https://unpkg.com/element-plus/dist/index.full.js"></script> <!-- form-create 渲染器 --> <script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script> <!-- 设计器 --> <script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script> <script> const { createApp } = Vue; const app = createApp({}); app.use(ElementPlus); app.use(FcDesigner); app.use(FcDesigner.formCreate); app.mount('#app'); </script> </body> </html>四、基础使用
4.1 模板中使用设计器
<template> <div class="designer-wrapper"> <fc-designer ref="designer" height="100vh" /> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const designer = ref(null); onMounted(() => { // 设计器实例，可用于调用 API console.log(designer.value); }); </script> <style scoped> .designer-wrapper { width: 100%; height: 100vh; } </style>4.2 常用 Props 配置
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
height | String/Number | 100% | 设计器高度 |
config | Object | {} | 设计器配置项 |
mask | Boolean | false | 是否显示遮罩 |
五、核心 API 操作
通过ref获取设计器实例后，可调用以下方法：
5.1 获取/设置表单 JSON
// 获取当前表单的 JSON 规则 const getJson = () => { const json = designer.value.getRule(); console.log('表单规则:', json); return json; }; // 获取表单配置（表单属性） const getOption = () => { const option = designer.value.getOption(); console.log('表单配置:', option); return option; }; // 设置表单规则（回显/加载已有表单） const setJson = (rule) => { designer.value.setRule(rule); }; // 设置表单配置 const setOption = (option) => { designer.value.setOption(option); };5.2 清空与重置
// 清空设计器 designer.value.clear(); // 清空选中状态 designer.value.clearActiveRule();5.3 保存与导出
// 获取完整表单数据（包含规则和配置） const getFormData = () => { return { rule: designer.value.getRule(), option: designer.value.getOption() }; }; // 保存到后端 const saveForm = async () => { const formData = getFormData(); await fetch('/api/form/save', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); };六、表单渲染（使用 form-create）
设计器生成的 JSON 规则需要通过form-create组件渲染：
6.1 渲染表单
<template> <div> <!-- 渲染表单 --> <form-create v-model="formData" :rule="rule" :option="option" @submit="onSubmit" /> </div> </template> <script setup> import { ref } from 'vue'; // 从后端获取或设计器导出的 JSON const rule = ref([ { type: 'input', field: 'username', title: '用户名', value: '', props: { placeholder: '请输入用户名' }, validate: [{ required: true, message: '用户名不能为空', trigger: 'blur' }] }, { type: 'select', field: 'gender', title: '性别', value: '0', options: [ { label: '男', value: '0' }, { label: '女', value: '1' } ] } ]); const option = ref({ form: { labelPosition: 'right', labelWidth: '100px' }, submitBtn: true, resetBtn: true }); const formData = ref({}); const onSubmit = (formData) => { console.log('提交数据:', formData); }; </script>6.2 表单方法
<template> <form-create ref="formCreate" v-model="formData" :rule="rule" :option="option" /> <el-button @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> <el-button @click="validateForm">验证</el-button> </template> <script setup> import { ref } from 'vue'; const formCreate = ref(null); const formData = ref({}); const submitForm = () => { formCreate.value.submit(); }; const resetForm = () => { formCreate.value.resetFields(); }; const validateForm = async () => { const valid = await formCreate.value.validate(); console.log('验证结果:', valid); }; // 获取表单值 const getValue = () => { const value = formCreate.value.formData(); console.log(value); }; // 设置表单值 const setValue = () => { formCreate.value.setValue('username', '张三'); }; </script>七、自定义扩展
7.1 自定义组件扩展
FcDesigner 支持注册自定义组件到设计器中：
// 在 main.js 中注册自定义组件 import CustomComponent from './components/CustomComponent.vue'; // 通过 form-create 注册 FcDesigner.formCreate.component('custom-comp', CustomComponent); // 在设计器配置中添加自定义组件 const customMenu = { title: '业务组件', list: [ { icon: 'icon-star', name: 'custom-comp', label: '自定义组件', rule() { return { type: 'custom-comp', field: 'custom_field', title: '自定义字段', props: {} }; }, props() { return [ { type: 'input', field: 'prop1', title: '属性1' } ]; } } ] };7.2 配置面板定制
通过config属性可以定制设计器界面：
<template> <fc-designer :config="designerConfig" /> </template> <script setup> const designerConfig = { // 隐藏某些菜单 menu: ['main', 'aide', 'layout'], // 自定义字段配置 fieldReadonly: false, // 语言设置 locale: 'zh-cn', // 是否显示表单配置 showFormConfig: true, // 是否显示组件配置 showComponentConfig: true }; </script>八、完整示例：表单设计 + 保存 + 渲染
<!-- DesignerPage.vue - 表单设计页面 --> <template> <div class="designer-page"> <div class="toolbar"> <el-button type="primary" @click="saveForm">保存表单</el-button> <el-button @click="previewForm">预览</el-button> <el-button @click="clearForm">清空</el-button> </div> <fc-designer ref="designer" height="calc(100vh - 60px)" /> </div> </template> <script setup> import { ref } from 'vue'; import { ElMessage } from 'element-plus'; const designer = ref(null); // 保存表单 const saveForm = async () => { const data = { rule: designer.value.getRule(), option: designer.value.getOption() }; try { await fetch('/api/form-design', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); ElMessage.success('保存成功'); } catch (error) { ElMessage.error('保存失败'); } }; // 预览表单 const previewForm = () => { const rule = designer.value.getRule(); const option = designer.value.getOption(); // 打开预览弹窗或跳转到预览页面 console.log('预览规则:', rule); }; // 清空表单 const clearForm = () => { designer.value.clear(); ElMessage.success('已清空'); }; </script> <style scoped> .toolbar { padding: 10px; border-bottom: 1px solid #e4e7ed; background: #fff; } </style><!-- RenderPage.vue - 表单渲染页面 --> <template> <div class="render-page"> <form-create v-model="formData" :rule="formRule" :option="formOption" @submit="handleSubmit" /> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const formRule = ref([]); const formOption = ref({}); const formData = ref({}); onMounted(async () => { // 从后端加载表单配置 const res = await fetch('/api/form-design/1'); const data = await res.json(); formRule.value = data.rule; formOption.value = data.option; }); const handleSubmit = (data) => { console.log('表单提交:', data); // 提交业务数据 }; </script>九、注意事项
Vue 版本要求：Vue 3 项目请使用
@form-create/designer@^3版本Node.js 环境：如需二次开发设计器源码，需要 Node.js 18 + pnpm
样式覆盖：设计器内部使用 Element Plus 组件，确保正确引入样式文件
移动端适配：移动端项目请使用
@form-create/vant-designer版本
十、相关资源
官方文档：view.form-create.com
GitHub 源码：github.com/xaboy/form-create-designer
Pro 版本：pro.form-create.com（提供更多高级功能）
如需进一步了解Ant Design Vue 版本或Vant 移动端版本的配置，可以参考对应版本的安装文档。