Vue 3 中安装并使用 Axios 详细步骤+样例代码详解

# 安装axios
npm install axios

// 在Vue 3项目中的main.js文件中引入axios并配置到全局
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
 
// 创建axios实例，可以添加配置，例如基础URL
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 1000,
  // 可以添加更多配置
})
 
// 创建Vue应用
const app = createApp(App)
 
// 通过全局属性配置axios
app.config.globalProperties.$http = instance
 
// 挂载Vue应用
app.mount('#app')

// 在Vue组件中使用axios发送请求
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    async fetchData() {
      try {
        const response = await this.$http.get('/data')
        console.log(response.data)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在这个样例中，我们首先在项目中安装了axios。然后在main.js中创建了axios的实例，并通过Vue的全局属性将其配置为全局可用的实例。最后，在组件中使用该全局属性发送GET请求。这个过程展示了如何在Vue 3项目中安装和配置axios，并在组件中使用它来发送HTTP请求。