vue3配置全局封装axios属性

在Vue3中，可以通过创建一个axios实例并将其挂载到Vue实例的原型链上来实现全局封装axios属性。具体步骤如下：

1. 安装axios和@vue/composition-api模块：

npm install axios @vue/composition-api

2. 在main.js文件中引入@vue/composition-api模块，并创建一个axios实例：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import axios from 'axios'
import { provide } from '@vue/composition-api'

const app = createApp(App)
const pinia = createPinia()

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000', // 设置axios请求的基础URL
  timeout: 5000, // 设置请求超时时间
})

app.config.globalProperties.$axios = axiosInstance // 将axios实例挂载到Vue实例的原型链上
provide('axios', axiosInstance) // 将axios实例挂载到Composition API的provide函数上

app.use(pinia)
app.mount('#app')

3. 在组件中使用axios：

import { useAxios } from '@vue/composition-api'

export default {
  setup() {
    const axiosInstance = useAxios()

    axiosInstance.get('/api/users')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })

    return {}
  }
}

在组件中使用`useAxios`函数从Composition API中获取axios实例，然后就可以像平常一样使用axios进行网络请求了。