App Loading
应用初次启动时或者应用刷新时,出现的加载效果。
代码在 app-loading
特此声明
loading 效果的代码属于 pure-admin 点击查看:https://github.com/pure-admin/vue-pure-admin/blob/cd21f1e050011d8f761094bf8a1e110fb8a33959/index.html#L20-L81
为什么?
单页面应用,用户初次进入或者刷新应用,一是会下载大量代码进行页面渲染,二是页面展示前需要时间发送接口请求用户详情和动态路由,这个过程需要用户等待,为了避免用户看到白屏或者短暂的黑屏(暗黑主题),我们使用 loading 效果避免这个问题。
原理
进入应用调用 setupLoading 显示 App Loading,请求完用户详情接口调用 hideLoading 函数关闭 Loading。
关闭 Loading 效果
在 src/index.tsx
文件中,注释或者移除掉 setupLoading 函数。
Loading2
在 /src/plugins/loading.ts 中提供了另一种 loading 效果。
如果要使用这个 loading 效果,批量替换代码中的 setupLoading 函数为 setupLoading2 即可。
自定义 loading 效果
编辑文件 src/plugins/loading.ts
,修改代码即可。
下面几个网站提供了 loading 效果,可以自行选择。
为什么不使用 vite-plugin-app-loading 插件?
代码非常的简单,引入插件反而比较复杂。
请自行决定,链接在此:https://github.com/hooray/vite-plugin-app-loading