通用版本移动端表单设计器

FcDesigner Mobile（Vant 版）是一款基于 Vue3.0 的移动端低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。目前，在 OA 系统、ERP 系统、电商系统、流程管理等系统中已稳定应用。

开源版

开源版文档

---

设计器壳子与表单渲染

1. 设计器壳子（工具栏、属性面板、弹窗、大纲等界面）：内置精简版 Element Plus（FdElementPlus），随设计器 app.use(FcDesignerMobile) 时自动注册，无需在项目中额外安装或挂载 element-plus
2. 表单组件（画布中的字段及预览）：使用 Vant 4 渲染，需安装 @form-create/vant 和 vant
3. 精简版 Element Plus 使用 fel 命名空间，避免与项目中已有的 Element Plus 样式冲突

注意

1. 移动端设计器与 PC 端设计器功能和配置项一致，只有渲染器和设计器组件的名称不同
2. 阅读文档时将 fc-designer 和 form-create 标签替换为 fc-designer-mobile 和 form-create-mobile 标签即可
3. 表单使用 @form-create/vant 组件渲染

安装

首先，你需要下载并解压 fcDesignerMobile（Vant 版），然后将其集成到你的项目中。

标准集成:

1. 创建目录：在项目的 src 目录下，创建一个名为 fcDesignerMobile 的文件夹。（需放在 src 下，打包工具才能正确解析模块导入路径）

2. 解压并复制：解压下载的代码包，将 dist 目录复制到刚刚创建的 fcDesignerMobile 目录中。

3. 导入路径：放置完成后，在 src/main.js 或入口文件中使用以下路径引入：

   • 若配置了 @ 指向 src（Vite、Vue CLI 默认支持）：import FcDesignerMobile from '@/fcDesignerMobile/dist/index.es.js'
   • 或使用相对路径（入口文件在 src/ 下时）：import FcDesignerMobile from './fcDesignerMobile/dist/index.es.js'

试用版集成:

若您获取的是试用版压缩包，dist 目录下仅包含以下两个文件，不含 pc/、render/、mobile/ 等子目录：

dist/
├─index.es.js
└─index.umd.js

集成方式与标准包相同：将上述文件放入项目的 fcDesignerMobile/dist/ 目录，并通过 dist/index.es.js（或 index.umd.js）引入设计器。

说明：

• 试用包仅提供完整设计器入口，不包含独立 PC 包、渲染器分包等产物。
• 引入路径固定为 dist/index.es.js，不能使用 dist/pc/index.es.js 等路径。

源码集成（可选）:

1. 将解压后的 src/ 目录全部内容复制到 fcDesignerMobile 文件夹

2. 将源码包内 package.json 的 dependencies 字段合并到项目的 package.json

3. 重新运行 npm install 安装依赖

注意

源码方式集成后若进行二次开发，后续直接覆盖更新会导致自定义修改丢失，建议通过版本管理工具（如 git）进行差异合并更新。

编译文件说明

├─dist 编译文件目录
│ │//移动端表单设计器（内置精简版 Element Plus 作为设计器壳子）
│ ├─index.[es|umd].js
│ │//移动端 runtime 环境的渲染器, 无需导入设计器
│ ├─mobile/form-create.vant.[es|umd].js
│

试用包说明: 试用版 dist 目录仅包含 index.es.js 与 index.umd.js，无上述 pc/、render/、mobile/ 等子目录与文件。

引入

接下来，你可以通过 CDN 或 Node.js 方式引入 fcDesignerMobile 到你的项目中。

通过 Node.js 引入

如果你正在使用 Node.js 作为包管理器，你可以按照以下步骤安装并引入相关依赖：

1. 安装依赖：

npm install @form-create/vant@^3
npm install vant

如已安装旧版本渲染器，请执行以下命令更新至最新版：

npm update @form-create/vant@^3

无需安装 Element Plus

设计器壳子所需的精简版 Element Plus 已内置在设计器包中，不需要额外执行 npm install element-plus，也不需要在项目中 app.use(ElementPlus)。

2. 引入并挂载：

import FcDesignerMobile from '/path/to/fcDesignerMobile/dist/index.es.js'
import vant from 'vant'
import 'vant/lib/index.css'

// 挂载 Vant（表单渲染）
app.use(vant)
// 挂载 fcDesignerMobile 组件（内置精简版 Element Plus 作为设计器壳子）
app.use(FcDesignerMobile)
// 挂载 formCreate
app.use(FcDesignerMobile.formCreate)

通过 CDN 引入

如果你希望通过 CDN 直接引入库文件，请按照以下步骤操作：

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>

<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/vue"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

<!-- 引入 form-create 及 fcDesignerMobile -->
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="/path/to/fcDesignerMobile/dist/index.umd.js"></script>

<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<!-- 挂载组件 -->
<script>
    // 创建 Vue 应用实例
    const app = Vue.createApp({});
    // 挂载 vant
    app.use(vant);
    // 挂载 fcDesignerMobile 组件
    app.use(FcDesignerMobile);
    // 挂载 formCreate
    app.use(FcDesignerMobile.formCreate);
    // 挂载 Vue 应用
    app.mount('#app');
</script>

注意

如果项目中 UI 组件采用按需导入，首次引入设计器时，可能因未挂载所需组件导致样式错乱或功能异常。如遇此情况，请按常见问题补挂缺失组件。

使用

成功引入后，请先配置商业授权密钥，再使用设计器组件：

<template>
    <fc-designer-mobile ref="designer" :config="config" height="100vh" />
</template>
<script setup>
const config = {
    // 请替换为您在用户中心获取的授权密钥
    license: 'your-license-key',
}
</script>

完整说明请查看商业授权。

命令说明

开发环境要求：Node.js 需使用 v18 版本，包管理器工具采用 pnpm。

开发环境

pnpm run dev

打包设计器

pnpm run build

打包多语言文件

pnpm run build:locale

打包移动端渲染器

pnpm run build:mobile

打包预览页面,输出 index.html

pnpm run build:preview

通过以上步骤，你现在已经成功在项目中集成了 fcDesignerMobile（Vant 版），并且可以开始使用它来构建和设计表单。