Vue first screen Loading Loading

1. You can find that there is a blank when you re-enter the page or refresh the page

2, To achieve this effect requires a single page HTML in the Vue project

In index. HTML, write what you want to display <! -- Vue will automatically initialize the APP tag after rendering.<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>Loading please wait...</p>
      </div>
    </div>
Copy the code