文档说明

这套文档面向 art-design-pro-x 纯前端商业版，帮助开发者从“成功运行项目”逐步走到“理解底层机制、接入业务接口并完成生产交付”。文档中的目录、配置、接口和示例均以当前项目源码为依据，不把演示页面描述成已经具备服务端能力的完整业务系统。

先理解“纯前端”的含义

纯前端商业版并不等于完全不连接后端。项目只有一种运行模式：登录、退出和当前用户信息使用真实 HTTP 接口，尚未迁移的业务页面读取 src/mock 中的预置数据。你可以按页面或业务域逐步接入自己的后端，而不必先实现一整套固定服务端。

适合哪些项目

纯前端商业版适合以下场景：

已有 Java、Go、PHP、.NET、Python 或其他后端，希望直接使用成熟的 Vue 中后台前端底座。
正在定义后端接口，希望先完成页面、交互、权限结构和业务流程评审。
需要在多个客户项目中复用统一的布局、主题、表格、菜单和工程规范。
希望按模块迁移接口，而不是被一套既定后端模型、数据库结构或鉴权协议约束。

如果你需要前端与 Node.js 后端已经完成配套联调的版本，请阅读网站中的“前后端商业版”文档。两者共享大量前端设计与工程习惯，但认证协议、业务接口和交付边界并不相同。

项目运行模型

text

浏览器
├── 真实 API
│   ├── POST /api/v1/auth/signin
│   ├── POST /api/v1/auth/logout
│   ├── GET  /api/v1/user/info
│   └── GET  /api/v1/user/menus   仅 remote 菜单模式需要
│
├── 前端预置数据
│   ├── src/mock/system
│   ├── src/mock/content
│   ├── src/mock/workflow
│   ├── src/mock/monitor
│   └── 其他尚未接入后端的业务域
│
└── 前端基础设施
    ├── Vue Router 动态路由
    ├── Pinia 状态与持久化
    ├── Axios 请求封装
    ├── 表格、搜索与弹窗组件
    └── 主题、布局与国际化

这套模型有三个重要结果：

项目首次启动只需要准备最小认证接口，不要求业务后端全部完成。
未接入后端的写操作不会伪造“保存成功”，页面会明确提示当前不会写入服务端。
每个业务页面都可以从 @/mock/... 平滑迁移到 @/api/...，已迁移和未迁移页面可以同时存在。

你会在文档中学到什么

第一次接手项目

建议依次阅读：

完成这一阶段后，你应该能够独立启动项目，理解认证、本地数据和动态菜单之间的关系，并知道常见需求应从哪个目录开始修改。

准备接入后端

建议依次阅读：

这一阶段重点不是“把所有 Mock 一次删掉”，而是建立稳定的接口契约、错误处理和服务端鉴权，再按页面逐步验收。

准备开发业务

建议阅读：

准备生产发布

最后阅读：

文档中的约定

路径约定

除非特别说明，文档中的文件路径都相对于 art-design-pro-x/ 项目根目录，例如：

text

src/api/auth.ts

数据来源术语

术语	含义
真实 API	统一定义在 `src/api`，通过 `src/utils/http` 发起的 HTTP 请求
预置数据	`src/mock` 内由前端异步函数返回的演示数据
本地菜单	由 `src/router/modules` 生成并按当前用户角色过滤的菜单
远程菜单	由 `/api/v1/user/menus` 返回的完整路由树
前端权限	控制菜单、路由和按钮是否展示，不替代服务端鉴权

示例原则

示例优先展示项目现有写法，而不是另造一套架构。
环境变量示例使用占位地址，生产环境请替换为客户真实域名。
涉及数据修改时，会明确区分“界面演示”和“服务端持久化”。
涉及权限时，会同时说明前端体验控制与服务端安全责任。

开始之前

请确认你已经取得纯前端商业版源码，并准备好：

Node.js >= 20.19.0
pnpm >= 8.8.0
可访问的登录、退出和当前用户接口，或交付时提供的 Apifox Mock
一个现代浏览器和能够查看 Network、Console 的开发工具

文档说明 ​

适合哪些项目 ​

项目运行模型 ​

你会在文档中学到什么 ​

第一次接手项目 ​

准备接入后端 ​

准备开发业务 ​

准备生产发布 ​

文档中的约定 ​

路径约定 ​

数据来源术语 ​

示例原则 ​

开始之前 ​