骨架屏那些事儿

什么是骨架屏

骨架屏就是在页面尚未加载之前先给用户展示出页面的大致结构，直到页面请求数据后渲染页面。
骨架屏和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的项目加入骨架屏