FcDesigner Pro

Appearance

项目介绍 ​

本文介绍 FcDesigner 设计器项目的技术栈、依赖环境、以及 package.json 中的命令含义，并介绍安装依赖/启动步骤等操作流程。

技术栈概览 ​

  • 框架：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），确保进入项目后：

bash
node -v

输出为 v18.* 即可。

安装/启用 pnpm ​

bash
npm install pnpm -g
pnpm -v

安装依赖 ​

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

bash
pnpm install

注意事项：

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

启动开发服务 ​

bash
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 驱动）