Vue3全局封装axios使用，代码示例

当你在Vue3中全局封装axios时，你可以按照以下步骤进行操作：

1. 首先，安装axios依赖：

npm install axios

2. 在你的项目中创建一个新的文件，例如`src/plugins/axios.js`，用于封装axios的配置和方法。

3. 在`axios.js`文件中，导入axios和Vue：

import axios from 'axios';
import { reactive } from 'vue';

4. 创建一个新的axios实例，并设置一些默认配置。在这里，你可以根据需要进行自定义配置。

const http = axios.create({
  baseURL: 'http://api.example.com', // 设置基本的请求URL
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头
  },
});

5. 创建一个全局的Vue插件，将axios实例添加到Vue的原型中，以便在整个应用程序中可以直接使用：

export default {
  install: (app) => {
    app.config.globalProperties.$http = http;
  },
};

6. 在你的Vue应用程序的入口文件（例如`src/main.js`）中使用该插件：

import { createApp } from 'vue';
import axiosPlugin from './plugins/axios';

const app = createApp(App);

app.use(axiosPlugin);

app.mount('#app');

7. 现在，你可以在任何组件中通过`this.$http`来直接使用axios实例发送请求了。例如：

export default {
  mounted() {
    this.$http.get('/api/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  },
};

通过以上步骤，你就可以在Vue3中全局封装axios并使用了。这样，你在任何组件中都可以直接使用`this.$http`来发送请求，而不需要每次都导入axios库。