skeleton.js
配置完成后，新建一个骨架屏的入口 skeleton.js。
// src/skeleton/skeleton.js
import Vue from 'vue'// 引入的骨架屏组件
import skeletonHome from './skeleton/skeletonHome.vue'
import skeletonMessage from './skeleton/skeletonMessage.vue'
export default new Vue({
components: {
skeletonHome,
skeletonMessage,
},
template: `
<div>
<skeletonHome id="skeleton-home" style="display:none"/>
<skeletonMessage id="skeleton-message" style="display:none"/>
</div>
`
})
上面的代码中，引入的两个组件分别对应 首页（Home） 和 消息页（Message） 的骨架屏，其中组件的 id 对应之前在 vue.config.js 里 skeletonId 。
贴上其中一个骨架屏组件的代码：
// skeletonMessage.vue
<template>
<div class="skeleton-block">
<div class="sk-loanList-header-bg"></div>
<s-messageItem/>
<s-messageItem/>
<s-messageItem/>
<s-messageItem/>
</div>
</template><script>
import messageItem from './components/s-messageListItem'
export default {
name: 'skeletonMessage',
components: {
's-messageItem': messageItem
}
}
</script>
<style scoped>
.skeleton-block {
width:100%;
height: 100vh;
}
.sk-loanList-header-bg {
height:88px;
background:#2954D0;
}
</style>
其实就是很普通的一个 Vue 组件，在组件里写自己想要的骨架屏的样式即可，可复用的地方还可以再分成组件。 在路由里加上 skeletonMessage ，看一下效果：
至此，现在骨架屏已经准备就绪了，是不是很简单 。
效果展示
这边模拟一下移动端访问环境，先进入 Chrome DevTools 中的 Performance 进行设置。
运行 Performance：
效果：
从骨架屏替换成页面的过程中还是有闪一下的，目前还不知道这个是否可以优化，尝试中。
查看一下 Performance 中不同页面展现的时间：
（ps：解释一下，我也不知道什么情况，运行完之后就是尼:horse:这么糊…）
