骨架屏
##骨架屏提升用户体验,比菊花屏、白屏用户体验强很多,下面就实践怎样搭骨架屏
使用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打包完成了。