我先安装了animate.css，因为这里我引用了动画，懒得自己写了，在main.js作了如下配置：

import animate from 'animate.css'

Vue.prototype.animate = animate

然后再Main.vue开始写代码 

 <div id="backBox" v-show="isShow">
        <div class="imgs animated" :class="anmiateClass">
            <img :src="imgSrc">
        </div>
        <div class="btn animated" :class="btnAnmiateClass" @click="backClick">
            <img :src="btnImg">
        </div>
  </div>

data(){
      return {
        isShow : false,
        btnAnmiateClass:'',
        anmiateClass:'',
        btnImg:"/src/images/knows.png",
        imgSrc:"/src/images/1.png",
        theme: this.$store.state.app.themeColor,
        imgArr:[
            "/src/images/1.png",
            "/src/images/2.png",
            "/src/images/3.png",
            "/src/images/4.png",
            "/src/images/5.png",
            "/src/images/6.png"
        ],
        num:0,
        newUser:''
}

    mounted(){
      //这里是调用后端接口已经ok了，后端返回的newUser为true 
      if(this.newUser == 'true'){ // 第一次登录网站 newUser => true, 测试使用 false
        this.isShow = true
        var oImg = document.getElementsByClassName("imgs")[0]
        oImg.style.left="45px"
        this.anmiateClass = "flash"
      }
    },

methods:{
      backClick(){
        ++this.num
        var oImg = document.getElementsByClassName("imgs")[0]
        oImg.style.left = "auto"
         if(this.num==1){
            // oImg.addClass('animated bounceOutLeft')
            this.anmiateClass = "zoomIn"
            oImg.style.right="228px"

        }else if(this.num==2){
            this.anmiateClass = "lightSpeedIn"
            oImg.style.right="139px"
        }else if(this.num==3){
            this.anmiateClass = "zoomIn"
            oImg.style.right="151px"
        }else if(this.num==4){
            this.anmiateClass = "fadeInDown"
            oImg.style.right="69px"
        }else if(this.num==5){
            this.anmiateClass = "zoomInRight"
            oImg.style.right=0
            this.btnImg = "/src/images/finish.png"
        }
        if(this.num<6){
            this.imgSrc = this.imgArr[this.num]
        }else{
            this.btnAnmiateClass = "fadeOut"
            this.anmiateClass = "fadeOut"
            setTimeout(()=>{
              this.isShow = false
              sessionStorage.setItem('newUser','false')
              // document.getElementById('backBox').style.display = 'none'
            },1200)
        }
    }
}

#backBox{
    // display: ;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    top: 0;
    z-index: 1000;
    opacity: 0.6;
.imgs{
    opacity: 1;
    position: absolute;
    top:0;
    // right:1167px
}
.btn{
    top: 500px;
    right: 300px;
    position: absolute;
}
.app-main{
    width: 100%;
    height: 100%;
}

大体图如下：