大家好，我是松柏。
自从跟着鱼皮哥使用了ant design pro中的OpenAPI插件之后，我已经无法忍受自己写请求后端接口的方法了，所以这篇文章记录一下如何在非ant design pro项目中使用OpenAPI。

安装依赖

首先我们需要安装包@umijs/openapi：

yarn add @umijs/plugin-openapi

这其实就是在antd pro中使用的OpenAPI插件，它跟antd pro并没有什么耦合，可以在其它项目中直接使用。
然后安装请求库axios：

yarn add axios

当然也可以使用其它的请求库，我这里以axios为例。

配置

首先配置OpenAPI的生成规则，添加以下openapi.config.ts配置文件：

import {generateService} from '@umijs/openapi'generateService({// 请求工具路径，按实际项目更改，建议尽量按umi-request的参数格式定义请求工具。因为生成的server传参是按umi-request来的。requestLibPath: "import request from '@/../config/axios.config'",// 后端提供的swagger Json。ps：这里使用相对路径存在问题，没有解决。使用绝对路径、远程路径可以schemaPath: 'http://localhost:1101/api/v3/api-docs',// 生成servers的路径// serversPath: './servers',// 项目名称，生成server会在这个文件夹下projectName: 'backend-template-new-pine',// 命名空间，生成的类型命名空间namespace: 'backup',
});

然后新增axios.config.ts文件配置一下axios：

import axios from "axios";const request = axios.create({baseURL: "http://localhost:1101/api",headers: {},
});export default request;

添加命令

在package.json文件的scripts中添加命令：

"openapi": "ts-node config/openapi.config.ts"

现在我们执行一下进行测试：

ok，执行成功！service目录下生成了接口文件：

之后就可以直接使用了。

这次分享就到这里了，拜拜👋🏻！