Vue 实现骨架屏（skeleton）

Vue实现骨架屏的步骤：
1.安装骨架屏插件：

npm install vue-skeleton-webpack-plugin

2.由于骨架屏插件依赖服务端渲染，再安装vue-server-renderer

npm install vue-server-renderer

3.在src>components新建skeleton目录，里面创建index.vue跟entry.skeleton.js，如下图：

4.在index,vue中写入骨架屏的样式，通常与首页的布局一致，例如：

5.配置entry.skeleton.js的入口文件：

import Vue from 'vue'
import Skeleton from './index'
export default new Vue({
  components: {
    Skeleton
  },
  template: ''
})

6.在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/components/skeleton/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

7.在webpack.dev.conf.js跟webpack.pro.conf.js或者统一在webpack.base.conf.js中分别引入：

const SkeletonWebpackPlugin=require('vue-skeleton-webpack-plugin');

然后在plugins中分别导入：

    new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true,
    }),

以上为Vue项目骨架屏的全部配置过程！！！