大家好，我是松柏。
自从跟着鱼皮哥使用了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目录下生成了接口文件：
之后就可以直接使用了。
这次分享就到这里了，拜拜👋🏻！
