FcDesigner Pro

Appearance

开源版升级 ​

本文列出了从开源设计器（@form-create/designer / @form-create/antd-designer / @form-create/vant-designer）升级到 FcDesigner Pro 的核心步骤，逐条完成即可完成升级。

步骤 1：准备高级版包 ​

  1. 从官方渠道获取 fcDesignerPro（PC）或 fcDesignerMobile（移动）压缩包。
  2. 在项目根目录创建 fcDesignerPro（或 fcDesignerMobile）文件夹，将压缩包中的 dist/ 整个复制进去，保持路径不变。

试用包说明: 若获取的是试用版压缩包，dist 目录下仅包含 index.es.js 与 index.umd.js 两个文件，不含 pc/、render/、mobile/ 等子目录。集成时同样放入 fcDesignerPro/dist/（或 fcDesignerMobile/dist/），并通过 dist/index.es.js 引入；不能使用 dist/pc/index.es.js 等路径。更多说明见各端快速上手文档中的「试用版集成」。

步骤 2：安装或更新依赖 ​

⚠️ 请根据当前项目使用的 FormCreate 设计器版本 选择对应命令，只需执行与你项目匹配的一组。

2.1 安装（区分 Vue 版本） ​

Vue 3 项目

sh
# Element Plus
npm install element-plus @form-create/element-ui@^3
# Ant Design Vue (v4)
npm install ant-design-vue@^4 @form-create/ant-design-vue@^3
# Vant (v4)
npm install vant@^4 @form-create/vant@^3

Vue 2 项目

sh
# Element UI
npm install element-ui @form-create/element-ui@^3
# Ant Design Vue (v2)
npm install ant-design-vue@^2 @form-create/ant-design-vue@^3
# Vant (v2)
npm install vant@^2 @form-create/vant@^3

2.2 更新（如已安装渲染器） ​

sh
npm update @form-create/element-ui@^3
npm update @form-create/ant-design-vue@^3
npm update @form-create/vant@^3

步骤 3：替换设计器入口 ​

将原本的开源包引用改为本地高级版路径：

diff
- import FcDesigner from '@form-create/designer'
+ import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js'

仅 PC 使用可换成 /dist/pc/index.es.js；移动端设计器使用 /fcDesignerMobile/dist/index.es.js。

步骤 4：替换渲染器 ​

  1. 复制 dist/render（PC）或 dist/mobile（移动）目录下的渲染器文件到业务项目（推荐放在 src/libs）。
  2. 修改引用：
diff
- import formCreate from '@form-create/element-ui'
+ import {formCreate} from '/path/to/fcDesignerPro/dist/index.es.js'
diff
- import formCreate from '@form-create/vant'
+ import {formCreate} from '/path/to/fcDesignerPro/dist/index.es.js'

渲染器复制后即可复用原有 rule、option 数据，无需改动。

步骤 5：配置商业授权 ​

FcDesigner Pro 为商业授权产品。完成上述步骤后，需要在设计器 config.license 中配置有效的授权密钥，设计器与表单渲染器才能正常初始化。

  1. 登录 FormCreate 用户中心，在授权管理中查看并复制 License 密钥。
  2. 将密钥写入设计器配置：
vue
<template>
    <fc-designer ref="designer" :config="config" height="100vh" />
</template>
<script setup>
const config = {
    // 请替换为您在用户中心获取的授权密钥
    license: 'your-license-key',
}
</script>

移动端设计器同样通过 config.license 配置。未配置时，控制台会提示 License 未配置。

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