vue-cli 构建骨架屏的方法示例

npm install vue-skeleton-webpack-plugin 

import Vue from \'vue\'

import Skeleton from \'./Skeleton.vue\'


export default new Vue({

components: {

Skeleton

},

template: \'<skeleton />\'

})

<template>

<div class=\"skeleton-wrapper\">
<style>
.skeleton {
padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton- ,
.skeleton .skeleton-content-bottom,
.skeleton .skeleton-content {
background: rgba(194, 207, 214,.5);
background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.15) 25%, transparent 25%);
background-size: 20rem 20rem;
animation: skeleton-stripes 1s linear infinite;
margin: 0 auto 30px;
text-align: center;
color: darkgray;
}

.skeleton-head {
width: 100px;
height: 60px;
float: left;
}

.skeleton-body {
margin-left: 110px;
}

.skeleton-  {
width: 90%;
height: 60px;
line-height: 60px;
}

.skeleton-content {
width: 60%;
height: 40px;
background: rgba(194, 207, 214,.3)!important;
}
.skeleton-content-bottom {
width: 40%;
height: 40px;
margin: 0 auto 30px 20%!important;
background: rgba(194, 207, 214,.3)!important;
}
@key s skeleton-stripes {
from {
background-position: 0 0 ;
}
to {
background-position: 20rem 0;
}
}

</style>
<header class=\"skeleton-header\"></header>
<section class=\"skeleton-block\">
<div class=\"skeleton\">
<div class=\"skeleton-head\"></div>
<div class=\"skeleton-body\">
<div class=\"skeleton- \">加载中</div>
<div class=\"skeleton-content\"></div>
<div class=\"skeleton-content-bottom\"></div>
<div class=\"skeleton-content\"></div>
<div class=\"skeleton-content-bottom\"></div>
<div class=\"skeleton-content\"></div>
<div class=\"skeleton-content-bottom\"></div>
<div class=\"skeleton-content\"></div>
<div class=\"skeleton-content-bottom\"></div>
<div class=\"skeleton-content\"></div>
</div>
</div>
</section>
</div>
</template>

< >
export default {
name: \'skeleton\'
}
</ >

\'use strict\';

const path = require(\'path\')
const merge = require(\'webpack-merge\')
const  WebpackConfig = require(\'./webpack. .conf\')
const nodeExternals = require(\'webpack-node-externals\')

function resolve(dir) {
return path.join(__dirname, dir)
}

module.exports = merge( WebpackConfig, {
target: \'node\',
devtool: false,
entry: {
//指向自己的skeleton.js路径
app: resolve(\'../src/renderer/skeleton/skeleton.js\')
},
output:  .assign({},  WebpackConfig.output, {
libraryTarget: \'commonjs2\'
}),
externals: nodeExternals({
whitelist: /\\.css$/
}),
plugins: []
})