初次访问首页时，由于加载资源耗时比较久，会出现空白页的情况，可以在资源加载结束前增加Loading效果从而提升用户体验

1 实现思路

具体实现思路是在入口的index.html添加你所需的加载提示，让它在页面刚开始加载时默认显示，隐藏主页的root标签

再在Vue入口的mounted里将加载提示的标签隐藏，再将主页的root标签显示

2 具体实现

  1. 首先准备Loading效果图，如：spinner.gif

  2. 入口index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>硕果云-sg-admin</title>
    <style media="screen" type="text/css">
      .preloader-init {
        position: absolute;
        top: calc(50% - 65px);
        left: calc(50% - 65px)
      }
    </style>
  </head>
  <body>
    <script src=/static/tinymce4.7.5/tinymce.min.js></script>
    <img id="preloader-init" src="static/img/spinner.gif" class="preloader-init" alt="spinner"/>
    <div id="app" style="display: none">
    </div>
  </body>
</html>
  1. Vue入口App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default{
  name: 'App',
  mounted () {
    document.getElementById('app').style.display = 'block'
    document.getElementById('preloader-init').style.display = 'none'
  }
}
</script>

3 源码示例

spring-microservice-exam-ui