通过ZRender库实现了一个炫酷的大屏loading组件

上一篇文章用ZRender库画了一个大屏的顶部标题，本片文章是通过ZRender实现了一个大屏中炫酷的Loading。

我这个大屏是使用vue框架搭建的，vue是单页面应用，首次访问项目会导致有一定的白屏时间，这个白屏时间会给用户造成一种界面卡住的感觉，所以需要加一个loading界面，给用户提醒页面正在加载。

开始使用 ZRender (ecomfe.github.io)

一、ZRender库下载

npm install zrender

二、导入ZRender库

import * as zrender from "zrender";

三、组件使用思路

为了降低白屏对体验感的影响，我选择在App.vue主入口文件中引入我写的loading组件，在store中创建一个控制组件显示隐藏的属性，默认为true，当用户访问系统时，loading就会显示，等到拿到后端资源，进入路由后等待子页面触发onMounted，将store中的属性修改为false，将loading隐藏即可。

App.vue页面部分代码

<script setup>
import {useStore} from "./store/store.ts";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import HLoading from "./components/HLoading/index.vue";
const store =useStore()

</script>

<template>
  <el-config-provider :locale="local">
    <HLoading v-if="store.isLoading"></HLoading>
    <router-view></router-view>
  </el-config-provider>
</template>

Home.vue页面部分代码

<script setup>
import {useStore} from "../store/store.ts"
const store = useStore()

onMounted(()=>{
  store.isLoading =false
})
</script>

四、组件代码地址

https://github.com/banyan666/Demo-vue

五、效果展示

补充：

按照我的组件使用方法在开发环境下是可以正常使用的，但是打包后运行却会报错。问题排查出来是打包后loading组件中import * as zrender form 'zrender' 导入失败无法找到这个库，但是我上一篇文章中画的大屏标题组件内部也是这样引入库的，只不过组件没有在App.vue里使用，而是在其他界面引入使用的，打包后没有任何问题；但在App.vue里引入的loading组件，loading组件里面导入zrender打包后无法找到zrender库，不知道是什么原因，感觉可能是组件和依赖的加载顺序问题，有没有大佬帮我解释一下，最后解决办法是在main.ts中直接提前导入zrender并use注册，打包后就解决了引入失败的问题。

import { createApp } from 'vue'
import './css/style.css'
import './css/theme.css'
import App from './App.vue'
import router from "./router";
import {createPinia} from "pinia";
import * as zrender from 'zrender'

const pinia = createPinia()
const app=createApp(App)
app.use(zrender)
app.use(pinia)

app.use(router)
app.mount('#app')