vue仿app启动页

用vue开发的webapp，在性能差的android微信首屏加载时间过长，模拟app启动页减少用户的等待时间过长的感觉。

实现思路

通过sessionStorage存储项目是否被加载过,只在第一次加载显示启动页，在跳出外链回来时不再显示启动页。
主要实现的方案：

index.html入口文件

1	<div id="app"></div>

if (!sessionStorage.getItem('isLoaded')) {
  var app        = document.getElementById('app')
  var loadingStr = '数据加载中' 
  app.innerHTML  = '<a id="img_wrap" href=""><img id="start_img" src="./static/start-img-2.gif"><span id="count"><i id="count_num">2</i> S</span></a>'
  var TIME       = 2 // 倒计时
  var countNum   = document.getElementById('count_num')
  var timer      = setInterval(function () {
    if (TIME >= 1) {
      countNum.innerText = --TIME
    } else {
      clearInterval(timer)
      app.innerHTML = loadingStr // 防止倒计时结束vue还没挂载
    }
  }, 1000)
  
  // 解决点击后没有挂载
  document.getElementById('img_wrap').addEventListener('click',function (e) {
    sessionStorage.setItem('isLoaded', true)
  })
}

main.js

const mounted = function () {
  return function () {
    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    })
  }
}()

if (sessionStorage.getItem('isLoaded')) {
  mounted()
} else {
  setTimeout(() => {
    mounted()
    sessionStorage.setItem('isLoaded', true)
  }, 2000)
}