FcDesigner

Appearance

项目介绍 ​

本文介绍开源版 FcDesigner（v3） 项目的整体结构、技术栈、依赖环境与开发/构建命令，并补充 packages/ 下 3 个设计器包的定位与差异。

技术栈概览 ​

  • 仓库形态：pnpm workspace + Lerna（多包 monorepo，统一安装依赖、统一构建）
  • 框架：Vue（各包面向的 UI 框架不同）
  • 构建/开发：Lerna 编排命令；各包内部包含 dev/build/build:preview/build:locale 等脚本
  • 多语言：Gulp（各包内 build:locale）

依赖环境 ​

  • Node.js：18
  • 包管理器：pnpm

安装 Node.js 18 ​

你可以使用任意 Node 版本管理器（如 nvm/fnm），确保进入项目后：

bash
node -v

输出为 v18.* 即可。

安装/启用 pnpm ​

bash
npm install pnpm -g
pnpm -v

安装依赖 ​

在设计器项目根目录执行：

bash
pnpm install

注意事项：

  • 只用 pnpm：避免同时使用 npm/yarn 造成 lockfile 混乱。
  • 以 lockfile 为准：默认会根据 pnpm-lock.yaml 安装，保证团队一致性。

启动开发服务 ​

本仓库包含 3 个设计器实现，按 UI 框架拆分为不同包，根目录提供便捷命令启动对应 demo/开发环境：

bash
pnpm run dev:ele

说明：

  • dev:ele 会通过 Lerna 在对应包内执行 dev 脚本（lerna run dev --scope=@form-create/designer）。
  • 其他 UI 版本可用 dev:vant、dev:antd，见下方命令说明。

命令说明 ​

以下命令来自 仓库根目录 package.json 的 scripts 字段（按用途分类）：

开发 ​

  • pnpm run dev:ele：启动 Element Plus 版设计器开发环境（@form-create/designer）
  • pnpm run dev:antd：启动 Ant Design Vue 版设计器开发环境（@form-create/antd-designer）
  • pnpm run dev:vant：启动 Vant 移动端设计器开发环境（@form-create/vant-designer）

构建（产物打包） ​

  • pnpm run build：构建所有 packages（实际执行 lerna run build）
  • pnpm run build:preview：构建各包的预览页面（实际执行 lerna run build:preview）

多语言 ​

  • pnpm run build:locale：批量构建多语言产物（实际执行 lerna run build:locale，各包由 gulpfile.js 驱动）

包说明 ​

仓库下的 packages/ 目录包含 3 个独立发布的设计器包（同版本号发布），分别对应不同的 UI 框架与使用场景：

packages/element-ui ​

  • npm 包名：@form-create/designer
  • 定位：PC 端设计器（Element Plus 生态），通过拖拽快速生成 FormCreate 规则/表单配置，提高表单开发效率。

packages/ant-design-vue ​

  • npm 包名：@form-create/antd-designer
  • 定位：PC 端设计器（Ant Design Vue 生态），面向使用 Ant Design Vue 的项目提供同等的设计器能力。

packages/vant ​

  • npm 包名：@form-create/vant-designer
  • 定位：移动端设计器（Vant 生态），用于移动端表单的可视化搭建与规则生成。