为了提升下用户体验,讲下项目中这个骨架屏的处理吧。 项目相关:vue-mall
搜了下网上的教程,大概有这么几种方式: (1)使用图片
(2)饿了吗方案
(3)ssr渲染
vue-server-renderer
这个插件。#app
这个元素上,这个方案就是先生成一个骨架屏的样式文件,在#app
中先占个位,达到在vue未挂载前有一个过渡效果。<div id="app">
<!--vue-ssr-outlet-->
</div>
// main.js
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vue
挂载到了#app
上面的这个渲染时间不是我们要解决目的所在,只是因为网络问题数据迟迟没到所以造成页面不完整,所以需要骨架屏。不知道看到这里的看官对这个方案有没有什么好的解决办法。(4)借助Puppeteer自动生成骨架屏
base64
为的图片做替换而已,还挺麻烦的,再个是puppeteer我不会啊。(5)vue-content-loader库
5
种其实就是第1种的衍生,使用vue-content-loader这个插件自己按照设计稿画出一个大致的svg
图,然后控制其显示隐藏。$ sudo npm install vue-content-loader -S
# 切换镜像以后还是报错?
$ sudo npm install --unsafe-perm vue-content-loader -S
轮播图
、金刚区
、精选会场
、推荐列表
。promise
保证一下优先级以及骨架屏的隐藏显示。mounted() {
Promise.all([this.getBanner(), this.getCategory(), this.getSession()])
.then(() => {
this.isSkeletonShow = false
this.getGoodsList()
})
}
preloading
加载将首页路由的优先级提高一下:const routes = [
{
path: '*',
name: 'Home',
component: () => import(/* webpackPreload: true */ '@/views/home')
}
]
mall
项目中也是这样写的,麻烦的地方就是需要骨架屏的页面都需要自己去定位然后写下骨架屏,不够自动化,但是我觉得也还好吧,其实一个项目中几个主要的页面走下骨架屏就行了,并不需要每个页面都骨架屏。参考链接: vue-content-loader page-skeleton-webpack-plugin vue-content-loader vue页面骨架屏