从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战四（引入Axios，并调用第一个接口）

RealWorld接口综述

本项目调用的是RealWorld项目的开放接口。
接口文档如下：

https://main--realworld-docs.netlify.app/docs/specs/backend-specs/endpoints

https://main--realworld-docs.netlify.app/docs/specs/frontend-specs/swagger

RealWorld 是一个适合初学者学习的 Demo 项目。它仿造了 Medium.com 网站实现了一个内容管理系统应有的基本功能，实现的功能包括：文章发布、用户登录注册、分类标签、收藏、评论等。

目前该项目已有 100+ 实现方式，每种实现方式可能使用了不同的前后端框架和编程语言，初学者可以结合自身需求，选择对应的技术栈进行学习，所有的实现在这里可以找到。

前端在线演示

本项目目标是调用该项目的开发接口，用ElementPlus做一个后台。实现注册登录，文章管理，评论管理，个人信息管理等模块。达到熟练应用ElementPlus常用组件的目的。

最终演示效果如下：

管理后台在线演示

安装axios

pnpm install axios
pnpm install --save-dev @types/node

封装axios

src目录下新建utils目录，utils目录中新建文件request.ts

import axios from 'axios';const instance = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API as string,
});export default instance;

项目目录下新建.env文件，注意该文件和package.json同级。定义项目中用到的环境变量。

VITE_APP_PORT = 3000VITE_APP_BASE_API = '/dev-api'VITE_APP_API_URL = 'https://api.realworld.io/api'

定义接口所需类型

src目录下新建types目录，types目录中新建文件index.d.ts

export interface User {username?: string;email: string;password: string;
}export interface UserInfo {email: string;password?: string;token?: string;username: string;bio: string;image: string;
}

注册api封装

src目录下新建api目录，api目录中新建文件index.ts

import request from '@/utils/request';import type {User,UserInfo
} from '@/types';export const register = (params: {user: User;
}): Promise<{ data: { user: UserInfo } }> =>request({method: 'POST',url: '/users',data: params,});