骨架屏那些事儿

什么是骨架屏

骨架屏就是在页面尚未加载之前先给用户展示出页面的大致结构，直到页面请求数据后渲染页面。
骨架屏和loading相比较还是骨架屏用户体验感更好。

实现骨架屏

1.安装插件

npm install vue-skeleton-webpack-plugin --save

2.在src目录下创建 skeleton.vue

3.在src目录下创建entry-skeleton.js文件

import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import skeleton from './skeleton';
export default new Vue({
components: {
skeleton
},
template: ''
});

4.在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')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = 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: []
})

5.在webpack.dev.conf.js和webpack.prod.conf.js引入webpack.skeleton.conf.js

const SkeletOnWebpackPlugin= require('vue-skeleton-webpack-plugin')
new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'),
quiet: true
})

完成以上步骤就可以实现骨架屏了,但是页面结构改变都需要UI配合制作页面结构的图片,不是很理想

在打包过程中因为css分离导致打包失败

目前的解决方法是在webpack.prod.conf.js文件里面把 extract和usePostCSS改为false

rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false,
usePostCSS: false
})

自动构建骨架屏

使用饿了么团队骨架屏的方案 page-skeleton-webpack-plugin

安装插件

npm install page-skeleton-webpack-plugin --save

插件使用方法：插件使用文档

目前存在的问题:能成功构建骨架屏，但是无法在项目体现出来,(可能是bug)有待饿了么团队修复。如果能够修复的话还是非常想使用这个方案来实现骨架屏。
参考文章：vue-cli的项目加入骨架屏