Vue 首屏页面加载Loading

1、可以发现 重新进入页面或者页面刷新会出现空白

2、想要实现这个效果需要在 Vue 项目中的单页面 HTML

    index.html 里面书写你想要显示的内容
    <!-- Vue渲染完成之后 会自动初始化这个 APP 标签 -->
    <div id="app">

      <style>
        #firstScreenPage {
    
    
          width: 100vw;
          height: 100vh;
          background-color: skyblue;
          position: relative;
          top: 0;
          left: 0;
          z-index: 999;
          text-align: center;
          font-size: 20px;
          color: red;
        }

        #firstScreenPage img {
    
    
          margin: auto;
          padding: 100px;
          width: 350px;
          display: block;
          border-radius: 50%;
        }

        #firstScreenPage p {
    
    
          text-align: center;
          height: 30px !important;
        }
      </style>
      <div id="firstScreenPage">
        <img src="http://img95.699pic.com/photo/40107/3040.gif_wh860.gif" alt="" />
        <p>正在加载请稍等...</p>
      </div>
    </div>