【Ant Design Pro】快速上手

初始化

初始化脚手架：快速开始

官方默认使用 umi4，这里文档还没有及时更新（不能像文档一样选择 umi 的版本），之后我选择 simple。

然后安装依赖。

在 package.json 中：

    "start": "cross-env UMI_ENV=dev max dev","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 中关于请求的配置：

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

我们可以在 app.tsx 中写自己请求的相关配置。

import { RequestConfig } from 'umi';export const request: RequestConfig = {timeout: 1000,errorConfig: {},middlewares: [],requestInterceptors: [],responseInterceptors: [],errorHandler,// ...
};