vue项目中使用骨架屏

1、在component文件夹下创建Skeleton文件夹。

安装
npm i vue-skeleton-webpack-plugin -S/-D

2、在Skeleton文件夹下创建这三个文件

1.entry-skeleton.js

import Vue from 'vue'
import Skeleton from './Skeleton'

export default new Vue({
    components: {
        Skeleton
    },
    template: '<Skeleton />'
}) 

2.Skeleton.vue

<template>
	<div class="skeleton-wrapper">
		<header class="skeleton-header">
			<div class="skeleton-header-bg"></div>
		</header>
		<section class="skeleton-block">
			<img
				src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg=="
			/>
			
		</section>

		<div class="skeleton__shine"></div>
	</div>
</template>

<script>
export default {
	name: "skeleton"
};
</script>

<style  lang="less" scoped>
@keyframes flush {
	0% {
		transform: translate(-100%, -100%) rotate(45deg);
	}
	100% {
		transform: translate(100%, 100%) rotate(45deg);
	}
}
.skeleton-wrapper {
	height: 100vh;
	background: #fff;
	.skeleton-header {
		padding: 0.1rem;
		height: 1.2rem;
	}
	.skeleton-header-bg {
		height: 100%;
		width: 100%;
		background: #f6f6f6;
	}
	.skeleton-block {
		display: flex;
		flex-direction: column;
		padding-top: 0.08rem;
	}

	.skeleton__shine {
		animation: flush 2s linear infinite;
		position: absolute;
		top: 0;
		height: 200%;
		width: 5rem;
		background: linear-gradient(
			to right,
			rgba(255, 255, 255, 0) 10%,
			rgba(255, 255, 255, 0.85) 50%,
			rgba(255, 255, 255, 0) 90%
		);
	}
}
</style>

3.webpack.skeleton.conf.js

在build下新建

'use strict';

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

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

module.exports = merge(baseWebpackConfig, {
    target: 'node',
    devtool: false,
    entry: {
        app: resolve('../src/components/Skeleton/entry-skeleton.js') // url
    },
    output: Object.assign({}, baseWebpackConfig.output, {
        libraryTarget: 'commonjs2'
    }),
    externals: nodeExternals({
        whitelist: /\.css$/
    }),
    plugins: []
})

3、修改webpack.dev.conf.js和webpack.prod.conf.js

同时引入

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
// plugins里添加
   // 骨架屏
    new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true
    })

这样就大功告成了。

注意 ：骨架屏是在webpack中配置，动态效果只在在打包后才看得到的！！！