Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
Ant Design 是一套企业级 UI 设计语言和 React 组件库。作为西湖区最好的组件库，它极大的提升了中后台开发的效率，广受国内外开发者的喜爱。
Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack 功能很强大，能帮我们完成的工作远远不止这些。
umi 是一个 Webpack 之上的整合工具。 umi 相比于 Webpack 增加了运行时的能力，同时帮助我们配置了很多 Webpack 的预设。也减少了 Webpack 升级导致的问题。
Ant Design Pro: https://pro.ant.design/
Ant Design: https://ant.design/
Webpack: https://webpack.js.org/
umi：https://github.com/umijs/umi
1. 系统环境
操作系统：CentOS 7.9 (x64)
NodeJS: 16.20.0
NPM: 8.19.4
NVM: 0.39.2
Ant Design Pro: 5.0.0
2. 创建 Ant Design Pro 项目
安装 @ant-design/pro-cli 脚手架，命令如下：
# 使用 -g 参数，表示该命令只需在本机上运行一次
$ npm i @ant-design/pro-cli -g
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated date-format@0.0.0: 0.x is no longer supported. Please upgrade to 4.x or higher.
npm WARN deprecated @stylelint/postcss-markdown@0.36.2: Use the original unforked package instead: postcss-markdown
npm WARN deprecated @stylelint/postcss-css-in-js@0.37.3: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated streamroller@0.4.1: 0.x is no longer supported. Please upgrade to 3.x or higher.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated log4js@1.1.1: 1.x is no longer supported. Please upgrade to 6.x or higher.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
added 1166 packages in 29s
使用 pro 命令创建 Ant Design Pro 项目，命令如下：
$ pro create myapp
? ? 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
umi@3
注：这里选 umi@3
> clone repo url: https://gitee.com/ant-design/ant-design-pro
Cloning into 'myapp'...
remote: Enumerating objects: 191, done.
remote: Counting objects: 100% (191/191), done.
remote: Compressing objects: 100% (163/163), done.
remote: Total 191 (delta 39), reused 114 (delta 18), pack-reused 0
Receiving objects: 100% (191/191), 309.24 KiB | 0 bytes/s, done.
Resolving deltas: 100% (39/39), done.
> ? clone success
> Clean up...
进入 myapp 项目目录安装依赖，命令如下：
$ cd myapp && npm install
...
> ant-design-pro@5.0.0 postinstall
> max setup
? Hello PRO
info - [你知道吗？] 全局布局用 layout ，多层布局用 wrappers ，从文档了解更多路由的控制方法，详见 https://umijs.org/docs/guides/routes
Using openapi Plugin
info - generate files
info - Preparing...
> ant-design-pro@5.0.0 prepare
> husky install
fatal: Not a git repository (or any of the parent directories): .git
added 2131 packages in 1m
3. myapp 项目
1) 启动项目
进入 myapp 目录，运行如下命令：
$ npm cache clean --force
$ npm run start # 或 npm run dev
> ant-design-pro@5.0.0 start
> cross-env UMI_ENV=dev max dev
? Hello PRO
info - [你知道吗？] 如果你需要使用 Tailwind CSS, max g tailwindcss 就可以一键完成配置，详见 https://umijs.org/docs/guides/generator#tailwind-css-配置生成器
Using openapi Plugin
info - Umi v4.0.3
info - Preparing...
warn - GET /api/rule is duplicated in mock/requestRecord.mock.js and mock/listTableList.ts
warn - GET /api/currentUser is duplicated in mock/user.ts and mock/requestRecord.mock.js
warn - POST /api/login/account is duplicated in mock/user.ts and mock/requestRecord.mock.js
warn - POST /api/login/outLogin is duplicated in mock/user.ts and mock/requestRecord.mock.js
╔════════════════════════════════════════════════════╗
║ App listening at: ║
║ > Local: http://localhost:8000 ║
ready - ║ > Network: http://192.168.1.5:8000 ║
║ ║
║ Now you can open browser with the above addresses↑ ║
╚════════════════════════════════════════════════════╝
event - [Webpack] Compiled in 3700 ms (494 modules)
info - [MFSU] buildDeps since cacheDependency has changed
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 175 ms (468 modules)
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 141 ms (468 modules)
event - [Webpack] Compiled in 17776 ms (10679 modules)
info - [MFSU] write cache
info - [MFSU] buildDepsAgain
info - [MFSU] skip buildDeps
使用浏览器访问 http://192.168.1.5:8000，本机上可以访问 http://localhost:8000 。
2) 目录结构
整个项目的目录结构：
├── config # umi 配置，包含路由，构建等配置
│ ├── config.dev.js
│ ├── config.js
│ ├── defaultSettings.js
│ └── routes.js
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.jsx # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
注: Ant Pro 支持 JavaScript 版和 TypeScript 版，本文以 JavaScript 版为例。
推荐的页面代码结构：
src
├── components
└── pages
├── Welcome // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
│ ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
│ ├── Form.jsx
│ ├── index.jsx // 页面组件的代码
│ └── index.less // 页面样式
├── Order // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
│ ├── index.jsx
│ └── index.less
├── User
│ ├── components // group 下公用的组件集合
│ ├── Login // group 下的页面 Login
│ ├── Register // group 下的页面 Register
│ └── util.js // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
└── * // 其它页面组件代码
相关文件扩展名，含义如下：
.ts 表示是一个 TypeScript 文件；
.js 表示是一个 JavaScript 文件；
.jsx 表示是一个 JavaScript XML 文件，可以理解为 React 提供的语法糖，可以让编译器更方便快速的选择编译方式；
.less 表示是一个 CSS 的预编译文件，可以让 CSS 的书写变为动态，甚至写函数；
为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，Ant Design Pro 定义了一套规范，该规范当前只作为推荐的指导，并非强制。
所有路由组件（会配置在路由配置中的组件）我们推荐以大驼峰命名打平到 pages 下面第一级（复杂的项目可以增加 group 层级，在 group 下放置 pages）。不建议在路由组件内部再嵌套路由组件 - 不方便分辨一个组件是否是路由组件，而且不方便快速从全局定位到路由组件。
推荐尽可能的拆分路由组件为更细粒度的组件，对于多个页面可能会用到的组件推荐放到 src/components 中，对于只是被单个页面依赖的（区块）组件，推荐就近维护到路由组件文件夹下即可。
通过 config\defaultSettings.ts 来控制标题和 Logo，这部分功能来自 ProLayout 的功能。可以在预览界面 中拷贝设置覆盖到 config\defaultSettings.ts 中来修改配置。
4. 新增页面
1) 新增 js、less 文件
在 src / pages 下创建 *.js，*.less 文件。如果有多个相关页面，可以创建一个新文件夹来放置相关文件。
创建 src/pages/NewPages.js 文件，内容如下：
export default () => {
return <div>New Page</div>;
};
样式文件默认使用 CSS Modules，如果需要，可以导入 antd less 变量 在文件的头部：
@import '~antd/lib/style/themes/default.less';
这样可以轻松获取 antd 样式变量并在文件中使用它们，这可以保持保持页面的一致性，并有助于实现自定义主题。
2) 新增布局
在脚手架中我们通过嵌套路由来实现布局模板。routes.js 是一个数组，其中第一级数据就是我们的布局，如果你需要新增布局可以再直接增加一个新的一级数据。
layouts 文件时一个约定，layout 都应该放入其中。v5 没有了内置的布局，所以没有这个文件夹，如果你的项目中没有手动创建即可。
export default [
// user
{
path: '/user',
component: '../layouts/UserLayout',
routes:[...]
},
// app
{
path: '/',
component: '../layouts/BasicLayout',
routes:[...]
},
// new
{
path: '/new',
component: '../layouts/new_page',
routes:[...]
},
]
3) 将文件加入菜单和路由
默认布局中的菜单根据 routes.js 中的路由生成的，所以我们可以配置路由，菜单也会产生。routes.js 格式如下：
export default [
{
path: '/user',
component: '../layouts/UserLayout',
routes: [{
path: 'https://pro.ant.design/docs/getting-started-cn',
target: '_blank', // 点击新窗口打开
name: '文档',
},
{
// 访问路由，以 / 开头为绝对路径
path: '/user/login',
// ./Page ->src/pages/Login
component: './NewPage',
},
{
// 访问路由，如果不是以 / 开头会拼接父路由
// reg -> /user/reg
path: 'reg',
// ./Page ->src/pages/Reg
component: '../layouts/NewPage2',
},
],
},
];
路由配置完成后，访问页面即可看到效果，如果需要在菜单中显示，需要配置 name，icon，hideChildrenInMenu 等来辅助生成菜单。具体参数如下：
name: string 配置菜单的 name，如果配置了国际化，name 为国际化的 key。
icon: string 配置菜单的图标，默认使用 antd 的 icon 名，默认不适用二级菜单的 icon。
access: string 权限配置，需要预先配置权限
hideChildrenInMenu: true 用于隐藏不需要在菜单中展示的子路由。
hideInMenu: true 可以在菜单中不展示这个路由，包括子路由。
hideInBreadcrumb: true 可以在面包屑中不展示这个路由，包括子路由。
headerRender: false 当前路由不展示顶栏
footerRender: false 当前路由不展示页脚
menuRender: false 当前路由不展示菜单
menuHeaderRender: false 当前路由不展示菜单顶栏
parentKeys: string[] 当此节点被选中的时候也会选中 parentKeys 的节点
flatMenu：子项往上提，只是不展示父菜单
4) 在菜单中使用 iconFont
要使用 iconFont 的图标必须满足两个条件
(1) 传入一个 iconFont 的 url 链接
(2) icon 命名必须以 icon-开头
在 src/app.jsx 中的配置：
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
return {
iconfontUrl: '//at.alicdn.com/t/XXX.js',
};
};