vue页面增加Loading效果，基于transition动画

一、首先在src下的components下新建loading目录，于此内新建index.vue组件，代码如下：

<template>
    <div class="loading"></div>
</template>
<script>
    export default {
        name: 'Loading' // 定义的组件名称 使用时写法：loading
    }
</script>
<style scoped>
    .loading {
        position: fixed;
        left: 0;
        top: 0;
        background: url('../../assets/css/images/loading.svg') center center no-repeat rgb(96, 96, 96, 0.8);
        width: 100vw;
        height: 100vh;
        z-index: 1000;
    }
//布局方式position必须设置为fixed，下载好对应的Loading图标，放置于相应的路径位置，配置好背景颜色以及透明度
</style>

二、来到需要加载Loading效果的组件里面,先引入组件，并配置好，代码如下：

import Loading from '@/components/loading'
components: {
    Loading
}

三、在组件template里面添加代码：

<transition name="fade">
    <loading v-if="isLoading"></loading>
</transition>

四、在data里面将isLoading属性值设置为true

data() {
    return {
        isLoading: true
    }
}

五、当页面加载进来的时候，即mounted等生命周期的时候，此时isLoading: true，所有会有加载Loading动画，当请求数据完成且渲染好后加一句代码：this.isLoading = false，即可关闭Loading效果。