《Ant Design Pro》快速上手指南:5步搭建中后台系统

Ant Design Pro 是阿里巴巴团队推出的企业级中后台前端解决方案，基于 React 技术栈构建。它集成了路由管理、权限控制、数据状态管理等常用功能，适用于需要快速开发管理系统的团队。学习并掌握 Ant Design Pro 的使用方法，能够显著提升开发效率，减少重复代码编写。本教程将带你从零开始，一步步搭建一个基础的中后台应用。

前期准备与环境搭建

1. 确保本地已安装 Node.js（建议版本 16 或以上）和 npm 包管理工具。在终端运行 `node -v` 和 `npm -v` 验证是否安装成功。
2. 安装 Ant Design Pro 脚手架工具 umi，执行命令:`npm install -g umi`。umi 是 Ant Design Pro 的核心框架，负责路由、插件管理和构建流程。
3. 创建项目目录并初始化项目:运行 `mkdir myapp && cd myapp && umi create`，选择「ant-design-pro」模板，按提示完成创建。
4. 进入项目文件夹，执行 `npm start` 启动开发服务器。浏览器将自动打开 http://localhost:8000，显示登录页面，表示项目初始化成功。

核心功能操作步骤

1. 登录系统后，进入默认的仪表盘页面。Ant Design Pro 提供了完整的菜单结构和布局组件，所有页面均基于 `@umijs/preset-react` 插件自动生成。
2. 添加新页面:在 `src/pages/` 目录下新建文件夹如 `ListTable`，内部创建 `index.tsx` 文件，写入基本 React 组件代码。保存后，系统会自动注册路由。
3. 配置菜单显示:修改 `config/routes.ts` 文件，在路由数组中添加 `{ path: '/list/table', name: '表格列表', component: './ListTable' }`，即可在左侧菜单看到新条目。
4. 使用内置服务模型:通过 `src/models/user.ts` 可查看全局状态管理实现方式，利用 dva 框架进行数据流控制。调用 API 接口时，可在 `services/` 目录下定义请求函数，并在组件中通过 `useEffect` 触发。

实用技巧与注意事项

1. 利用 Mock 数据加速开发:在 `mock/` 目录下编写模拟接口返回值，例如 `user.ts` 中导出用户信息对象，开发期间无需依赖后端接口。
2. 自定义主题颜色:修改 `config/theme.ts` 文件中的 less 变量，如 `@primary-color: '1DA57A';`，重新启动服务后即可生效。
3. 注意权限控制逻辑:Ant Design Pro 内置基于角色的访问控制（RBAC），通过 `access.ts` 文件配置不同路由的可见性，确保生产环境安全。
4. 构建生产版本前，执行 `npm run build`，输出静态资源到 `dist/` 目录，可直接部署至 Nginx 或 CDN。

常见问题解决

1. 启动时报错 “Cannot find module”:检查 node_modules 是否完整，运行 `npm install` 重新安装依赖。
2. 新增页面未出现在菜单:确认 `routes.ts` 中路径拼写正确，且组件路径以 `./` 开头。
3. 修改 theme 不生效:关闭开发服务器，清除缓存（`npm run clean`），重新启动 `npm start`。
4. 构建后页面空白:检查 `public/index.html` 是否存在根节点 `

`，并确认路由模式兼容部署路径。 通过以上步骤，你可以高效地使用 Ant Design Pro 快速搭建企业级中后台应用，充分发挥其模块化与可扩展的优势。