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/ 整个复制进去，保持路径不变。

步骤 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 数据，无需改动。