vue3调用后台接口

Vue3调用后台接口可以通过axios库实现，具体步骤如下：

安装axios库

在终端中输入以下命令安装axios库：

npm install axios

在Vue3组件中使用axios

在Vue3组件中，可以使用以下代码调用后台接口：

import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/items')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

在上面的代码中，axios.get('/api/items')表示向后台发送一个GET请求，请求的URL是/api/items，请求成功后将响应数据保存在组件的items属性中。

配置axios全局设置

如果需要在多个组件中使用axios，可以将axios的全局设置在Vue3的入口文件中进行配置，如下所示：

import { createApp } from 'vue';
import axios from 'axios';
import App from './App.vue';

const app = createApp(App);

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');

app.config.globalProperties.$axios = axios;

app.mount('#app');

在上面的代码中，axios.defaults.baseURL表示设置axios请求的默认URL前缀，axios.defaults.timeout表示设置axios请求的超时时间，axios.defaults.headers.common表示设置axios请求的公共请求头，app.config.globalProperties.$axios表示将axios设置为Vue3全局属性，可以在组件中通过this.$axios来使用axios