SPA单页应用骨架屏的使用

SPA单页应用骨架屏的使用

2020-04-22 16:32:45 评论 0 阅读 395 喜欢 0

说明


对于SPA单应用首次加载时间过程的问题,通过骨架屏来优化用户体验,不至于给用户一直展示空白页面。


以vue-skeleton为例,引入到现有的项目中。


使用


1.首先安装vue-skeleton插件


npm install vue-skeleton-webpack-plugin

2.创建骨架屏页面,在项目下创建 “skeletonHome.vue” 文件



注意:需要配合js代码的话,直接在div标签内部添加script标签。骨架屏不具备单独编译vue文件内部的js代码



<div class="skeleton-nav">
<div class="skeleton-width">
<div class="skeleton-nav-img"></div>
<div v-for="item in 3" :key="item" class="skeleton-nav-item"></div>
<div class="skeleton-nav-btns">
<div class="skeleton-nav-btns__item" />
</div>
</div>

<script>
var skeDom = document.getElementById('skeletonTime')
var pageTime = 0
var setInter = null
</script>
</div>

3.创建入口文件,在对于的路径下创建一个 “skeleton.js” 文件



骨架屏组件需要绑定一个id



import Vue from 'vue'
// 引用skeletonHome.vue文件
import skeletonHome from './SkeletonHome'

export default new Vue({
components: {
skeletonHome
},
template: `
<div>
<skeleton-home id="skeletonHome" style="display:none" />
</div>
`

})

4.在vue-cli配置中引用vue-skeleton插件


const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
configureWebpack: config => {
config.plugins.push(
new SkeletonWebpackPlugin({
webpackConfig: {
// 引用入口文件
entry: {
app: resolve('./src/views/skeleton/skeleton.js')
}
},
// 是否压缩
minimize: true,
// 需要使用骨架屏的路由,
router: {
mode: 'history',
routes: [
{
// 绑定的具体路由
path: '/',
// 入口文件中骨架屏的id
// 不同页面可以绑定不同id
skeletonId: 'skeletonHome'
},
{
path: '/verify',
skeletonId: 'skeletonHome'
}
]
}
})
)
}
}

总结


使用骨架屏后,客户端网速很卡的话,可以优化用户体验。


创建于: 2020-04-22 16:32:45
分享