写一个vue3的axios案例

在 Vue3 中，我们可以使用 `@/api` 这样的路径别名来方便地引用 Axios 实现 API 调用。首先，确保安装了 `axios` 和 `vite-plugin-axios` 插件。下面是一个简单的 Vue3 项目中如何使用 Axios 的例子：

1. 安装依赖：

npm install axios vite-plugin-axios --save
# 或者使用 yarn
yarn add axios vite-plugin-axios

2. 在 `vite.config.js` 添加 Axios 插件：

import { defineConfig } from 'vite';
import axiosPlugin from 'vite-plugin-axios';

export default defineConfig({
  plugins: [
    axiosPlugin({
      // 如果有全局配置，可以放在这里
      // baseURL: 'https://your-api-url.com',
    }),
  ],
});

3. 在组件中创建 Axios 组件实例并使用它：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from '@/plugins/axios';

const data = ref([]);
const fetchData = async () => {
  try {
    const response = await axios.get('/api/data'); // 替换为实际的 API URL
    data.value = response.data; // 解析返回的数据
  } catch (error) {
    console.error('请求错误:', error);
  }
};

onMounted(fetchData);
</script>

在这个例子中，我们定义了一个名为 `fetchData` 的函数，在页面加载完成后异步从 `/api/data` 获取数据，并将数据赋值给 `data` 变量。在模板中，按钮点击事件会触发 `fetchData`。