vue JS加载太慢，在app前添加加载页面
葛书
打包之后发现在APP之前有很长一段时间都在加载js，空白页面不太好，所以添加一个加载页面。
在index.js：
<style>
#anima {
width: 100px;
height: 100px;
border: 8px solid;
border-top-color: hsl(154, 100%, 31%);
border-left-color: hsl(216, 87%, 52%);
border-bottom-color: hsl(8, 66%, 50%);
border-right-color: hsl(42, 100%, 51%);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
animation: loading 0.8s linear infinite;
}
#appLoading{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#appLoading .img{
width: 70px;
height: 70px;
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%,-50%);
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#app {
display: none;
}
</style>
</head>
<body>
<div id="appLoading">
<div id="anima">
</div>
<div class="img">
</div>
</div>
<div id="app"></div>
</body>
在App.vue中：
mounted(){
document.getElementById('app').style.display = 'block';
document.getElementById('appLoading').style.display = 'none';
}
类似资料：