骨架屏

骨架屏
##骨架屏提升用户体验，比菊花屏、白屏用户体验强很多，下面就实践怎样搭骨架屏

使用vue-cli搭建项目，安装依赖，使用vue-skeleton-webpack-plugin注入骨架屏。在build目录下创建webpack.skeleton.conf.js

'use strict';
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const config = require('../config')
const utils = require('./utils')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction ?
	config.build.productionSourceMap :
	config.dev.cssSourceMap

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

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

// important: enable extract-text-webpack-plugin 
// 重点配置
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
	sourceMap: sourceMapEnabled,
	extract: true
})

module.exports = skeletonWebpackConfig

##在webpack.prod.conf.js和webpack.dev.conf.js中引入插件后，在src文件下次创建入口文件entry-skeleton.js

import Vue from 'vue'
import Skeleton from './skeleton'
export default new Vue({
	components: {
		Skeleton
	},
	template: `
    <div>
      <skeleton id="skeleton" style="display:none"/>
    </div>`
})

##和skeleton.vue文件

<template>
	<div>
		<div class="skeleton">
			<div class="skeleton-head"></div>
			<div class="skeleton-body">
				<div class="skeleton-name"></div>
				<div class="skeleton-title"></div>
				<div class="skeleton-content"></div>
			</div>
		</div>
		<div class="skeleton">
			<div class="skeleton-head"></div>
			<div class="skeleton-body">
				<div class="skeleton-name"></div>
				<div class="skeleton-title"></div>
				<div class="skeleton-content"></div>
			</div>
		</div>
	</div>
</template>

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

<style scoped>
	.skeleton {
		padding: 15px;
	}
	
	.skeleton .skeleton-head,
	.skeleton .skeleton-name,
	.skeleton .skeleton-title,
	.skeleton .skeleton-content,
	.skeleton .skeleton-content {
		background: rgb(194, 207, 214);
	}
	
	.skeleton-head {
		width: 33px;
		height: 33px;
		border-radius: 50%;
		float: left;
	}
	
	.skeleton-body {
		margin-left: 50px;
	}
	
	.skeleton-name {
		width: 150px;
		height: 30px;
		margin-bottom: 10px;
	}
	
	.skeleton-title {
		width: 100%;
		height: 30px;
	}
	
	.skeleton-content {
		width: 100%;
		height: 30px;
		margin-top: 10px;
	}
</style>

##运行 npm run dev 就可以运行骨架屏了，npm run build打包完成了。