项目介绍

这篇是二开入门页：告诉你环境怎么装、命令怎么跑，以及遇到需求该先看哪篇文档。

二开文档地图（按需求找文章）

刚上手

文档	什么时候看
项目介绍	装环境、看有哪些文档（就是本页）
目录结构	不知道文件该改哪里

最常见：加自己的能力

文档	什么时候看
通过 extension 扩展	想扩展时优先看这篇（统一入口，少改乱）
添加新组件	要从零加一个可拖拽组件
自定义组件移动端适配	电脑端好了，手机预览不对
源码扩展公式与行为	要把计算公式、按钮动作打进包里
添加自定义属性	要给渲染器加自定义属性处理

改已有功能

文档	什么时候看
增加拖拽操作按钮	画布组件上要加复制/删除之外的按钮
修改内置组件功能	改官方自带组件
修改组件默认规则与配置项	改拖进去后的默认值、右侧配置项
修改选择项配置方式	改下拉选项怎么配置
修改分组与组件顺序	改左侧菜单分组和排序

两条路怎么选？（超简版）

只是自己项目里用一下
  → 不用改本仓库，直接调 FcDesigner 的方法
     （菜单、组件、公式、行为等文档）


要把能力打进设计器安装包
  → 改本仓库，优先写 src/extension/
     再按上面的专篇把组件/手机端/公式补齐

重要提醒：设计器和填表不是同一个「引擎」

设计器内部其实有多套表单引擎（可以理解成好几台独立的小机器）：

名字	干什么
formCreate	电脑端真正填表
designerForm	电脑端设计画布
formCreateMobile	手机端真正填表（完整包才有）
designerFormMobile	手机端设计画布（完整包才有）

如果你只给其中一台导入数据、注册组件、改请求方法，就容易出现：

• 设计时看得到数据，预览却没有
• 电脑正常，手机不行

省事做法：扩展尽量走 extension，让框架帮你挂到各端。
如果必须手写，记得电脑 + 手机相关的都处理一遍。

更多说明见常见问题。

技术栈概览

• 框架：Vue 3 / Vue 2.7
• PC 端 UI / 渲染器：Element Plus / Ant Design Vue（不同构建目标可能不同）
• 移动端渲染器：Vant
• 构建工具：Vite（多份配置文件按目标产物拆分）
• 多语言构建：Gulp（批量构建语言包）

依赖环境

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

安装 Node.js 18

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

node -v

输出为 v18.* 即可。

安装/启用 pnpm

npm install pnpm -g
pnpm -v

安装依赖

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

pnpm install

注意事项：

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

启动开发服务

pnpm run dev

说明：

• 该命令实际执行的是 vite --config vite.dev.config.js。

命令说明

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

开发与清理

• pnpm run dev：启动开发环境（使用 vite.dev.config.js）
• pnpm run clean：清理构建产物目录（dist/）

构建（产物打包）

• pnpm run build：一次性构建多个目标产物（完整包 + PC 包 + 移动端渲染器 + PC 端渲染器）
• pnpm run build:elm：构建 Element Plus runtime 渲染器
• pnpm run build:mobile：构建 Vant runtime 渲染器
• pnpm run build:preview：构建预览页面（输出静态页面资源）

多语言

• pnpm run build:locale：批量构建多语言产物（由 gulpfile.js 驱动）