在Vue单文件组件的script部分如何使用axios-loading

在Vue单文件组件（.vue）的`script`部分，你可以使用axios-loading这个库来处理异步请求时的加载状态提示。首先你需要安装它：

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

然后在`script`部分导入并配置axios及axios-loading：

<template>
  <div>
    <!-- 组件内容 -->
    <button @click="fetchData">点击加载数据</button>
    <div v-if="loading">
      <Loading :percent="progress" />
    </div>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import { Loading } from 'axios-loading'

export default {
  data() {
    return {
      loading: false,
      progress: 0,
      data: []
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      this.progress = 100 // 初始化进度到100%，表示正在加载

      axios.get('your-api-url')
        .then(response => {
          this.data = response.data
          this.loading = false
          this.progress = 0 // 加载完成，进度归零
        })
        .catch(error => {
          console.error('Error fetching data:', error)
          this.loading = false
        })
    }
  }
}
</script>

在这个例子中，当用户点击按钮时，会触发`fetchData`方法，开启`loading`状态，并设置初始进度为100%。请求成功后，更新数据并将`loading`设为`false`，同时进度变为0。如果请求出错，会清除加载状态并打印错误信息。