VUE3工程发布后的运行过程为先加载html面，再通过html页中的js加载单页面js来渲染页面并显示。
根据这个加载过程，实现页面加载中的原理是预先在html中显示加载中，再单页面数据加载完成在mounted时隐藏加载中，即实现想要的效果。
在public/index.html中添加加载中图层，对应的css自己根据需要设计即可。
<div id="dvtop-app-loading"><div><div class="dvtop-loader"><div class="dvtop-loading"></div></div><div class="text">页面加载中</div></div></div>
在src/App.vue隐藏加载中。
mounted(){this.hideAppLoading();},methods: {hideAppLoading: function () {//删除加载中的图层const loadingLayer: any = document.getElementById("dvtop-app-loading");loadingLayer.style.opacity = "0.0";setTimeout(() => {document.body.removeChild( loadingLayer);}, 500); //此处时间要和#dvtop-app-loading的class中transition一致},}
对于页面切换动画效果借助animate.css动画包实现。
npm install animate.css -S
将src/App.vue中<router-view/>修改为如下代码。
<router-view v-slot="{ Component }"><transition mode="out-in" :duration="300"enter-active-class="animate__animated animate__fadeIn"leave-active-class="animate__animated animate__fadeOut"><keep-alive><component :is="Component"/></keep-alive></transition></router-view>
具体动画可以根据需要使用animate.css，进入下面官方网站预览和使用。Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/运行如下代码，在浏览器中打开http://127.0.0.1:8080/即可访问。
cd dvtop-designer npm run serve
如果觉得《第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。》对你有帮助，请点赞、收藏，并留下你的观点哦！
