Ant Design Pro：企业级中后台前端脚手架创建与部署指南

一、项目官方信息

Ant Design Pro 是开箱即用的企业级中后台前端方案，基于 React、Umi、Ant Design，提供登录、权限、布局、图表、表格等模板，是企业后台快速搭建的脚手架。

二、官方图片

上图为 Ant Design Pro 仓库在 GitHub 上的浅色/深色主题预览图。

三、环境要求

• Node.js 16+；
• npm/yarn；
• 现代浏览器。

四、创建步骤

1. 用 Umi 脚手架创建

npm install -g umi
mkdir myapp && cd myapp
npm create umi
# 选择 ant-design-pro 模板

2. 安装依赖并启动

npm install
npm run dev

浏览器打开 http://localhost:8000。

3. 目录结构

src/
├── pages/      # 页面
├── layouts/     # 布局
├── services/    # 接口
└── utils/       # 工具

4. 构建部署

npm run build
# 输出 dist/，部署到任意静态服务器或 Nginx

五、使用方法

• 登录/权限：内置登录与权限模型；
• 布局：侧边栏、顶部导航；
• 表格/表单：ProTable、ProForm；
• 图表：集成 AntV；
• 国际化：内置 i18n。

六、常见问题 FAQ

1. Ant Design Pro 是什么？ 企业级中后台前端脚手架，开箱即用。

2. 基于什么技术栈？ React + Umi + Ant Design。

3. 怎么新建项目？ npm create umi 选择 pro 模板。

4. 默认端口？ 8000。

5. 支持权限吗？ 内置登录与权限控制。

6. 怎么部署？ npm run build 输出静态资源。

七、跳转链接

• GitHub 仓库：ant-design/ant-design-pro
• 在线预览：preview.pro.ant.design
• 中文文档：README.zh-CN