vue项目未加载完成前显示loading

Aurora_juan

已于 2022-04-13 09:10:53 修改

阅读量1.1k

点赞数

文章标签： vue

于 2021-12-20 11:31:51 首次发布

本文链接：https://blog.csdn.net/Aurora_juan/article/details/122037778

版权

真正的强者，他们在年轻的时候，经历了沧桑，化解了迷茫，学会了坚强，懂得了疗伤。他们在哪里都能活，哪里都是舒适区，哪里都是自己的天堂

vue项目未加载完成前显示loading

vue作为单页面，首次加载是比较慢的，加载完成前显示的load界面较有必要！！

解决方法:

public/index.html

<div id="app">
      <div class="avue-home">
        <div class="avue-home__main">
            <img class="avue-home__loading" src="./svg/loading-spin.svg" alt="loading">
            <div class="avue-home__title">
                正在加载资源
            </div>
            <div class="avue-home__sub-title">
                初次加载资源可能需要较多时间 请耐心等待
            </div>
        </div>
        <div class="avue-home__footer">
            <a>Copyright 2017 © SOS Inc. All Rights Reserved. 浙江索思科技有限公司版权所有 Powered by 浙江索思科技有限公司</a>
        </div>
      </div>
    </div>

在id = app的节点中编写你要展示的load状态，加载好项目，自动会填充app里的内容！！！