vue 项目在加载完成之前，显示预置加载动画

自己有一个日记项目，由于服务器带宽很小1MB，在加载之前页面中显示是空白的，就想给它加个前置的动画，这个用户体验更好。

一、实现

1. 定义项目入口

如果你是 pwa 应用， vue3 默认都已经是 pwa 应用，就需要在 vue.config.js 的 pwa 字段中确保 pwa.manifestOptions.start_url 是 index.html。
比如我的配置如下

  /*** PWA 设置*/pwa: {name: '日记', // 名字themeColor: "#373737", // 背景颜色appleMobileWebAppCapable: true, // 苹果 WebApp 支持// manifest 设置manifestOptions: {name: '标题日记',short_name: "日记",theme_color: "#373737",start_url: "./index.html",display: "standalone",background_color: "#373737",icons: [{src: "logo.svg",sizes: "512x512",type: "image/svg+xml",purpose: "any",},{src: "appicon-apple.png",sizes: "512x512",type: "image/png",purpose: "any",},],}}

2. 在 index.html 添加需要展示的预置动画

这里看个人发挥了，就是把需要展示的放到 index.html 中即可，放到 id="app" 的 div 之外。
比如我的是

载入中

这样在项目还没有加载完成之前就能显示这个 .preloading 内的内容了

3. 项目加载完成后，隐藏掉之前的预置动画内容

这个简单，只需要在 app.vue 的 created 或 mounted 方法中隐藏这个东西即可

app.vue

created() {// 日记项目载入后，隐藏 preloadingdocument.querySelector('.preloading').style.display = 'none'
},

二、最终效果

三、开源项目

可以从我的这个开源项目中查看源代码：
https://github.com/KyleBing/diary