参考

1. loading.vue组件
  <template>
    <div class="loading"></div>
  </template>

  <script>
      export default {
          name: "Loading"
      }
  </script>

  <style scoped>
    .loading {
      margin: 0 auto;
      background: url('../../static/images/loading.gif') center center no-repeat #fff;
      width: 50vw;
      height: 50vh;
      z-index: 1000;
    }
  </style>

2. App.vue 全局的css
  .fade-enter,
    .fade-leave-active {
      opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s;
    }
    

3. 在组件中引用
<template>
  
  <transition name="fade">
    <loading v-if="isLoading"></loading>
  </transition>
</template>

<script>
import Loading from './Loading'
export default {
  name: "Feed",
  data(){
      return{
        isLoading: true
      }
  },
  methods:{
    loadPageData: function() {
      // axios 请求页面数据 .then 中将状态值修改this.isLoading = false
      this.isLoading = false
    }
  },
  components: {
    Loading
  },
  mounted() {
    this.loadPageData()
  },
</script>