vue app启动页

在vue-cli项目中添加页面启动页

<template>
  <div id="app">
  	// 启动页内容开始
    <div class="wrap" v-if="show">
      <div class="pic1">
        <img src="@/assets/images/pic1.png" />
        <img src="@/assets/images/pic2.png" />
        <img src="@/assets/images/pic3.png" />
      </div>
    </div>
    // 启动页内容结束
    
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      show: false
    }
  },
  mounted() {
  	//  判断页面是首次加载还是刷新
    if (window.performance.navigation.type === 1) {
      console.log('页面被刷新')
    } else {
       //  首次加载的话显示启动页内容，设置延时器再取消显示
      console.log('首次加载')
      this.show = true
      setTimeout(() => {
        this.show = false
      }, 4000)
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
}

//  启动页样式
.wrap {
    width: 100vw;
    height: 100vh;
    background: url('~@/assets/images/bg.png') no-repeat center top #fff;
    background-size: cover;
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    z-index: 2;
  }
  .wrap .pic1 {
    position: relative;
    width: 100%;
    top: 48px;
  }
  .pic1 img {
    opacity: 0;
    width: 21%;
    position: absolute;
    left: 48px;
    animation-name: fadeIn; /*动画名称*/
    animation-duration: 1s; /*动画持续时间*/
    animation-iteration-count: 1; /*动画次数*/
    animation-delay: 0s; /*延迟时间*/
    animation-fill-mode: forwards;
  }
  .pic1 img:nth-child(2) {
    left: 128px;
    top: 48px;
    animation-name: fadeIn; /*动画名称*/
    animation-duration: 1s; /*动画持续时间*/
    animation-iteration-count: 1; /*动画次数*/
    animation-delay: 1s; /*延迟时间*/
    animation-fill-mode: forwards;
  }
  .pic1 img:nth-child(3) {
    left: 208px;
    top: 48px;
    animation-name: fadeIn; /*动画名称*/
    animation-duration: 1s; /*动画持续时间*/
    animation-iteration-count: 1; /*动画次数*/
    animation-delay: 2s; /*延迟时间*/
    animation-fill-mode: forwards;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
      opacity: 0; /*中间状态 透明度为0*/
    }
    100% {
      opacity: 1; /*结尾状态 透明度为1*/
    }
  }
</style>