Ant Design Pro 入门指南

Ant Design Pro 是基于 Ant Design 和 umi 的企业级中后台前端解决方案，提供了一套开箱即用的中后台前端解决方案。

以下是入门 Ant Design Pro 的基本步骤：

1. 环境准备

首先确保你的开发环境满足以下要求：

Node.js (推荐 16.x 或更高版本)
npm 或 yarn (推荐 yarn)
Git

2. 创建项目

使用官方脚手架创建新项目：

# 使用 npm
npm create umi@latest my-app -- --template pro

# 或使用 yarn
yarn create umi my-app --template pro

# 或者克隆官方仓库
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project

3. 安装依赖

进入项目目录并安装依赖：

cd my-app
npm install
# 或
yarn

4. 启动开发服务器

npm start
# 或
yarn start

启动后，默认会在浏览器打开 http://localhost:8000

5. 项目结构

Ant Design Pro 的典型目录结构：

├── config                    # umi 配置
├── mock                      # 本地模拟数据
├── public                    # 静态资源
├── src
│   ├── assets                # 静态资源
│   ├── components            # 全局组件
│   ├── e2e                   # 集成测试
│   ├── layouts               # 通用布局
│   ├── models                # 全局 dva model
│   ├── pages                 # 页面
│   ├── services              # 后台接口服务
│   ├── utils                 # 工具库
│   ├── global.less           # 全局样式
│   └── global.ts             # 全局 JS
├── tests                     # 测试工具
├── README.md
└── package.json

6. 创建新页面

在 src/pages 下创建新目录，例如 NewPage
创建 index.tsx 文件作为页面组件
创建 service.ts 文件定义 API 请求（可选）
创建 model.ts 文件定义数据模型（可选）

7. 路由配置

路由配置通常在 config/routes.ts 中定义：

export default [
  {
    path: '/new-page',
    name: '新页面',
    icon: 'smile',
    component: './NewPage',
  },
];

8. 常用命令

npm start – 启动开发服务器
npm run build – 构建生产环境代码
npm run lint – 运行代码检查
npm test – 运行测试

9. 自定义主题

在 config/config.ts 中修改主题配置：

export default {
  theme: {
    'primary-color': '#1890ff',
  },
};

10. 部署

构建完成后，将 dist 目录下的文件部署到你的服务器即可。

11. 学习资源

通过以上步骤，你应该能够快速开始使用 Ant Design Pro 进行开发。随着使用的深入，可以进一步学习其高级特性如权限控制、数据流管理等。