骨架屏
- 就是页面加载前的
loading
改为一个图片形式的骨架屏。 如下图:
环境
- vue-cli3
- spa
- 多路由,多骨架(不同路由页面实现不同骨架屏)
github
插件地址
vue-skeleton-webpack-plugin。
由于官方没有基于vue-cli3
多骨架 多路由的demo
,在这里写一个 。
代码
目的
home.vue ---> 骨架屏1 (Skeleton1)
test.vue ---> 骨架屏2 (Skeleton2)
1.新建两个骨架屏组件
Skeleton1.vue
<template>
<div class="skeleton1-wrapper">我是骨架屏1111111</div>
</template>
Skeleton2.vue
<template>
<div class="skeleton1-wrapper">我是骨架屏2222222</div>
</template>
2.新建骨架屏配置js
entry-skeleton.js
- 这里注意下
seleton
的id
,等在vue.config.js
中要用到。
// - entry-skeleton.js
import Vue from 'vue';
import Skeleton1 from './Skeleton1.vue';
import Skeleton2 from './Skeleton2.vue';
export default new Vue({
components: {
Skeleton1,
Skeleton2,
},
//render: h => h(Skeleton1,Skeleton2),
template: `
<div style='height: 100%;'>
<skeleton1 id="skeleton1" style="display:none"/>
<skeleton2 id="skeleton2" style="display:none"/>
</div>
`
});
3.vue.config.js
中配置
//引入 插件vue-skeleton-webpack-plugin
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
configureWebpack: (config) => {
config.plugins.push(new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, './src/skeleton/entry-skeleton.js'),//这里为上面的entry-skeleton.js
}
},
minimize: true,
quiet: true,
router: {
mode: 'hash',
routes: [
{
path: '/home', //和router.js中的路径一样就行
skeletonId: 'skeleton1' //之前的id
},
{
path: '/test',
skeletonId: 'skeleton2'
}
]
}
}))
},
//此插件需要css分离
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
4.骨架屏生成器(若无ui画骨架屏)
vue-content-loader
里面有各种骨架屏,也可以自定义。- 也可以网上画好了,粘贴下来。在线生成骨架屏