ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Ant Design Pro】快速上手 [打印本页]

作者: 徐锦洪 时间: 2024-7-27 20:05
标题: 【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,
// ...
};

复制代码

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

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

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

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

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

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)