该方案需要手写骨架屏样式vue-skeleton-webpack-plugin
一、安装
npm install vue-skeleton-webpack-plugin --save-dev
或者
cnpm install vue-skeleton-webpack-plugin --save-dev
二、在src目录skeleton文件夹，该文件夹用来存放和骨架屏相关的代码
1、index.js
import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import ggjlogin from './ggjlogin';
import indexpage from './indexpage';
export default new Vue({
components: {
ggjlogin,
indexpage
},
template:`<div>
<ggjlogin id="ggjlogin" style="display:none"/>
<indexpage id="createrule" style="display:none" />
</div>`
});
2、ggjlogin.vue
<template>
<div>
<div class="_ __" style="height:100%;z-index:990;background:#fff"></div>
<div class="_" style="height:10.945%;top:5.097%;left:40.267%;width:19.467%"></div>
<div class="_" style="height:3.673%;top:26.387%;left:8.267%;width:83.467%"></div>
<div class="_" style="height:3.673%;top:34.108%;left:8.267%;width:83.467%"></div>
<div class="_" style="height:3.448%;top:41.829%;left:10.933%;width:80.800%;border-radius:4px"></div>
<div class="_" style="height:6.597%;top:50.075%;left:8.267%;width:83.467%;border-radius:22px"></div>
</div>
</template>
<script>
export default {
name: 'ggjlogin'
};
</script>
<style scoped>
._ {
position: fixed;
z-index: 999;
background: #eee;
animation: opacity 1s linear infinite;
;
}
.__ {
top: 0%;
left: 0%;
width: 100%;
}
</style>
3、indexpage .vue
<template>
<div>
<div class="skeleton-wrapper">
<div class="login-img">
indexpage
</div>
<div class="btn-box"></div>
</div>
</div>
</template>
<script>
export default {
name: 'indexpage'
};
</script>
<style scoped>
.skeleton-wrapper {
height: 100%;
display: flex;
flex-direction: column;
padding-top: 8px;
font-size: 32px;
padding: 0 36px;
position: relative;
}
.login-img {
height: 108px;
border-radius: 20px;
background: #eee;
margin-top: 68px;
margin-bottom: 138px;
color: #eee;
overflow: hidden;
}
.btn-box{
padding: 32px;
position: absolute;
bottom: 32px;
left: 32px;
right: 32px;
background: #eee;
border-radius: 44px;
}
</style>
三、vue.config.js
引入插件
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
const skeletonPath = process.env.NODE_ENV === "production" ? " /h5/" : "/"
publicPath: process.env.NODE_ENV === "production" ? "/" + buildNmae : "/", // 部署应用包时的基本 URL
ps：该变量是用来区分开发环境和正式环境的配置，h5是你部署应用包时的基本别名，router的配置决定了我们各个路由路径所对应的骨架屏。router.mode 填路由模式，两个值可选 history | hash.
router.routes 填路由数组，其中path对应着页面在vue-router中的path，skeletonId是骨架屏的id，
参考https://www.kunjuke.com/jiaocheng/18578/?btwaf=40080715
configureWebpack: config => {
config.plugins.push(new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: resolve("src/skeleton")
}
},
minimize: true,
quiet: true,
router: {
mode: 'history',
routes: [
{
path: `${routPath}ggjlogin`,
skeletonId: 'ggjlogin'
},
{
path: `${routPath}createrule`,
skeletonId: 'createrule'
}
]
}
}))
}
配置完后需要重启工程才有效额
ps：需要手动去写骨架屏的样式。骨架屏样式在不同尺寸下的响应式问题。在界面改动之后也需要手动修改对应的骨架屏。，解决方法如下：
安装依赖：
npm install postcss-pxtorem --save-dev
2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）
module.exports={plugins:{'autoprefixer':{browsers:['Android >= 4.0','iOS >= 7']},'postcss-pxtorem':{rootValue:16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rempropList:['*']}}}
参考链接：https://www.jianshu.com/p/8350b611e5bb
希望对大家有帮助，有帮助的的话给点个赞额
