SPA单页应用骨架屏的使用
SPA单页应用骨架屏的使用
小灰哥
Lv7
2020-04-22 16:32:45 评论 0 阅读 610 喜欢 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'
}
]
}
})
)
}
}
总结
使用骨架屏后,客户端网速很卡的话,可以优化用户体验。
分类: 技术分享
原创文章