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

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",
        },
      ],
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

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

<link rel="stylesheet" href="preloading.css">

<view class="preloading">
    <view class="logo-preloading">
        <img src="logo.svg" alt="LOGO">
    view>
    <view class="preloading-title">载入中view>
    <div class="loading">
        <div class="loading-1 loading-item">div>
        <div class="loading-2 loading-item">div>
        <div class="loading-3 loading-item">div>
    div>
view>

<div id="app">div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

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

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

app.vue

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

二、最终效果

三、开源项目

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