vue如何引入axios-loading

在 Vue 项目中引入 `axios-loading` 插件以便实现 Axios 请求的全局加载提示，你可以按照以下步骤进行：

1. **首先，安装依赖**：
使用 npm 或 yarn 安装该插件。如果是 npm，打开终端（Mac/Linux）或命令提示符（Windows），在项目根目录下运行：

   npm install axios axios-loading --save
   # 或者使用 yarn
   yarn add axios axios-loading

2. **配置 Axios**：
在你的 Vue 项目中，通常会在 `src/main.js` 文件里配置 Axios。确保已经创建了一个 Axios 实例，并配置了默认头、baseURL 等。添加 Axios-Loading 的配置：

   import axios from 'axios'
   import Loading from 'axios-loading'

   const service = axios.create({
     baseURL: process.env.BASE_API, // api的base_url
     timeout: 5000, // 请求超时时间
     headers: {'X-Header': 'foobar'}, // 自定义请求头
   })

   Loading.service(service) // 将服务绑定到 Axios-Loading

   // 然后将 service 导出供整个应用使用
   export default service

3. **在组件中使用**：
在需要使用加载提示的组件里，导入 `Loading` 对象并使用它：

   import { Loading } from '@/utils/axios'

   export default {
     methods: {
       fetchData() {
         Loading.start(); // 开始加载
         this.$axios.get('/api/data') // 使用已配置的 service 发送请求
           .then(response => {
             Loading.finish(); // 请求完成，结束加载
             console.log(response.data);
           })
           .catch(error => {
             Loading.error(error); // 请求失败，显示错误信息
           });
       }
     }
   }