【Ant Design Pro】快速上手

初始化

   初始化脚手架：快速开始
  官方默认使用 umi4，这里文档还没有及时更新（不能像文档一样选择 umi 的版本），之后我选择 simple。
然后安装依赖。
在 package.json 中：

1.     "start": "cross-env UMI_ENV=dev max dev",
2.     "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",

复制代码

这里 start 模式使用了前端项目内的 mock 数据，而 start:dev 没有使用mock 数据，必要真实的后端接口。
Pro 的底座是 umi，umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增长了运行时的本事，同时帮助我们设置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。
以前 umi/plugins 里的插件已经内置到 @umijs/plugins 了，可以通过 plugins: [‘@umijs/plugins/dist/*’] 用。插件都必要兼容 umi4 才气用，插件 api 有变革，没兼容的是用不了的。比如 umi-ui 在 umi4 中并不支持 issues。
   umi-ui 还是很好用的，不知道什么时间可以支持 umi4.
  项目瘦身

移除国际化

然后也可以把 src/locale 文件夹删掉了。

• config 设置
  
• defaultConfig 默认设置
  
• routes 路由
  
• proxy 代理设置
  
• oneapi 也是和 api 相干的，可以删掉
  

然后可以删除页面和对应的路由。

这里的 swagger 接口文档工具也可以删掉。
前后端联调

   antd pro 哀求 或者是 umi 哀求
  检察 antdpro 官网，发现哀求相干设置在 app.tsx 中。
或者也可以打开 antd pro 的 github 源码，发现 app.tsx 中关于哀求的设置：

1. /**
2. * @name request 配置，可以配置错误处理
3. * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
4. * @doc https://umijs.org/docs/max/request#配置
5. */
6. export const request = {
7.   ...errorConfig,
8. };

复制代码

我们可以在 app.tsx 中写本身哀求的相干设置。

1. import { RequestConfig } from 'umi';
3. export const request: RequestConfig = {
4.   timeout: 1000,
5.   errorConfig: {},
6.   middlewares: [],
7.   requestInterceptors: [],
8.   responseInterceptors: [],
9.   errorHandler,
10.   // ...
11. };

复制代码

但是他这里的设置明显是不全的，以是我们必要逐层进入源码进行查找。然后就可以发现很多设置（比如 prefix，timeout等）。
或者也可以看官方文档（但是直接看源码会更快更准一些）：

这是最新版的 umi，不同于上个版本，上一个版本应该是 透传的 umi-request 。
直接在 github 中看 umi-request，发现更新也已经是三年前了。
设置代理

直接使用 antdpro 提供的 config\proxy.ts 即可。
然后前端统一在 api.ts 中加上 api：

同时后端也都加上 /api 前缀：

（虽然前后端同时都不加 /api 应该也可以