Vue3辅助生成api接口（鱼皮学习笔记）
OpenAPI工具+axios工具
前置条件：确保npm的版本，我采用的版本是npm -v >=20.x，后端服务启动，并且配置了接口文档工具
axios工具
命令行下载安装依赖包
npm install axios
创建初始化文件：在src中创建文件reques.ts文件
import axios from 'axios' import { message } from 'ant-design-vue' // 创建 Axios 实例 const myAxios = axios.create({ baseURL: 'http://localhost:8123/api', timeout: 60000, withCredentials: true, }) // 全局请求拦截器 myAxios.interceptors.request.use( function (config) { // Do something before request is sent return config }, function (error) { // Do something with request error return Promise.reject(error) }, ) // 全局响应拦截器 myAxios.interceptors.response.use( function (response) { const { data } = response // 未登录 if (data.code === 40100) { // 不是获取用户信息的请求，并且用户目前不是已经在用户登录页面，则跳转到登录页面 if ( !response.request.responseURL.includes('user/get/login') && !window.location.pathname.includes('/user/login') ) { message.warning('请先登录') window.location.href = `/user/login?redirect=${window.location.href}` } } return response }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error) }, ) export default myAxiosOpenAPI工具：
官方地址
下载安装依赖包
npm i --save-dev @umijs/openapi
安装依赖包，不安装这个可能会报错
npm i --save-dev tslib
创建初始化配置文件，这个在整个项目的更目录下：这里的配置根据实际后端更改
export default { requestLibPath: "import request from '@/request'", schemaPath: 'http://localhost:8123/api/v3/api-docs', serversPath: './src', }在package.json文件中配置
"scripts": { "dev": "vite", "build": "run-p type-check \"build-only {@}\" --", "openapi2ts": "openapi2ts", //---在这里添加，然后左边有个箭头点击运行一下-- "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --build", "lint": "eslint . --fix --cache", "format": "prettier --write --experimental-cli src/" },然后就可以看到运行成功，这个工具会自动添加一个api文件夹在src文件夹里