单页应用有个无法避免的问题就是首屏加载慢，虽然可以通过gzip、路由懒加载、CDN、提高服务器带宽等手段，首屏加载速度仍然比传统多页应用慢一些。
为了提高用户体验，首屏添加loading动画很有必要，并且实现特别简单。
vue-cli3生成的项目中，打开index.html会发现如下代码
<body><noscript><strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected -->复制代码
我们只需要在这个div中插入loading代码即可,vue初始化完成后会自动替换
<div id="app">此处插入loading代码</div>复制代码
以下是我实现的一种动画效果，可自行替换
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="X-UA-Compatible" content="chrome=1"/><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" type="text/css" href="///t/font_1112431_q8oa3yvrwbh.css"><title>demo</title><style>.spinner {margin: 100px auto;width: 50px;height: 60px;text-align: center;font-size: 10px;}.spinner > div {background-color: #FE3C71;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out;}.spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}.spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}.spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}.spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}@-webkit-keyframes stretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4)}20% {-webkit-transform: scaleY(1.0)}}@keyframes stretchDelay {0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}</style></head><body><noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"><div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div></div><!-- built files will be auto injected --></body></html>复制代码
