接下来加入Loading，使用了vant组件的Toast提示，所以先引入vant，其他UI库同理

在使用Vue.js开发项目时，如果想添加加载指示器并集成Vant UI库的Toast提示功能，首先需要安装Vant组件库。你可以通过npm或yarn来安装：

# 使用npm
npm install vant vant-loading

# 或者使用yarn
yarn add vant vant-loading

接下来，在`main.js`或其他全局引用的地方导入Vant，并启用它：

import Vue from 'vue'
import { createApp } from 'vue/create-app'
import Vant from 'vant'
import Toast from 'vant/toast'

// 全局注册Vant组件
Vant.use({
  Toast
})

const app = createApp(Vue)
app.config.globalProperties.$toast = {
  // 如果你想自定义Toast的行为，可以在这里配置
}

app.mount('#app')

现在你在组件中就可以使用`this.$toast`来显示加载状态和错误提示了，例如：

<template>
  <div>
    <van-loading v-model="isLoading" />
    <button @click="loadData">加载数据</button>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      error: ''
    };
  },
  methods: {
    loadData() {
      this.isLoading = true;
      // 模拟异步操作
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.error = '加载失败';
        } else {
          this.error = '';
          this.isLoading = false;
        }
      }, 2000);
    }
  }
}
</script>

在这个例子中，当点击按钮时，会开启一个加载指示器，如果数据加载失败，会在稍后显示一个错误信息。