1、Ant Design Pro 初了解

说到ant design pro，得先了解一下ant design是个什么东西？ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架。而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架 。
1、 Ant-Design 官网原地址： https://ant.design/index-cn

Ant-Design 官网镜像地址：http://ant-design.gitee.io/index-cn
 

2、 Ant-Design-Pro 原地址： https://pro.ant.design/index-cn

Ant-Design-Pro 镜像地址：http://ant-design-pro.gitee.io/index-cn
 
3、 Ant-Mobile 原地址： https://mobile.ant.design/index-cn

Ant-Mobile 镜像地址：https://antd-mobile.gitee.io/index-cn

2、安装

默认你本地已安装好node和git环境

  1. $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
  2. $ cd my-project

3、目录结构

  1. ├── config                   # umi 配置，包含路由，构建等配置
  2. ├── mock                     # 本地模拟数据
  3. ├── public
  4. │   └── favicon.png          # Favicon
  5. ├── src
  6. │   ├── assets               # 本地静态资源
  7. │   ├── components           # 业务通用组件
  8. │   ├── e2e                  # 集成测试用例
  9. │   ├── layouts              # 通用布局
  10. │   ├── models               # 全局 dva model
  11. │   ├── pages                # 业务页面入口和常用模板
  12. │   ├── services             # 后台接口服务
  13. │   ├── utils                # 工具库
  14. │   ├── locales              # 国际化资源
  15. │   ├── global.less          # 全局样式
  16. │   └── global.js            # 全局 JS
  17. ├── tests                    # 测试工具
  18. ├── README.md
  19. └── package.json

4、让你的项目run起来！

  1. tyarn install #安装相关依赖 
  2. tyarn start #启动服务

打开浏览器访问 http://localhost:8000
ant design pro超详细入门教程 - 图1

5、开始项目你的项目

  1. a.在src/pages 目录下新建你的模块与页面<br />![](https://cdn.nlark.com/yuque/0/2022/png/22478710/1650685440116-44ee7f73-2a5d-44da-9d16-f088e9f2e0a3.png#clientId=uc710bd7a-12b2-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uea746c83&margin=%5Bobject%20Object%5D&originHeight=125&originWidth=350&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u516b4821-77f2-48f1-8da2-cb578b597e8&title=)<br />    b.在config目录下router.config.js文件中配置菜单路由<br />![](https://cdn.nlark.com/yuque/0/2022/png/22478710/1650685455487-b79647b6-8cb3-420d-af06-094cbfa03b29.png#clientId=uc710bd7a-12b2-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u2900dc5e&margin=%5Bobject%20Object%5D&originHeight=126&originWidth=322&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=udbb88f38-9367-4053-95ec-4bff521fb76&title=)<br />  c.国际化<br />    在src目录下的locals配置新菜单栏目所对应的中文信息<br />![](https://cdn.nlark.com/yuque/0/2022/png/22478710/1650685475797-664be9f4-10f9-4cd8-b2e2-bfb9c0fdc241.png#clientId=uc710bd7a-12b2-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u8a388325&margin=%5Bobject%20Object%5D&originHeight=230&originWidth=360&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u715785c8-7c1d-4dfe-be26-9d89743b0c2&title=)