在Vue 3项目中，你可以使用axios作为HTTP客户端，并结合nprogress来添加顶部进度条。以下是如何配置全局axios以使用nprogress的步骤和示例代码：
- 安装nprogress和axios：
npm install nprogress axios- 在项目中引入nprogress并设置其样式：
// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const app = createApp(App)
// 配置axios
axios.interceptors.request.use(config => {
NProgress.start() // 每次请求前启动进度条
return config
})
axios.interceptors.response.use(response => {
NProgress.done() // 每次响应后完成进度条
return response
})
app.config.globalProperties.$axios = axios
app.mount('#app')- 在组件中使用全局配置的axios发送请求：
<template>
<div>
<!-- 组件内容 -->
</div>
</template>
<script>
export default {
name: 'YourComponent',
mounted() {
this.fetchData()
},
methods: {
async fetchData() {
try {
const response = await this.$axios.get('/your-api-endpoint')
// 处理响应数据
} catch (error) {
// 处理错误
}
}
}
}
</script>在这个配置中，每次请求发起时，NProgress会自动显示进度条，而当响应返回后，进度条会自动完成并隐藏。这样可以为用户提供更好的加载过程可视化。