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中写入骨架屏的样式，通常与首页的布局一致，例如：

 <template>     <div class="skeleton">         <section></section>         <div class="center">           <ul class="dec">               <li v-for="n in 2" :key="n">                   <span></span>                   <span></span>               </li>               <li>                   <span></span>               </li>           </ul>             <ul class="features">                 <li v-for="n in 3" :key="n">                     <i></i>                     <span></span>                 </li>             </ul>         </div>         <div class="detail">             <ul>                 <li v-for="n in 3" :key="n">                     <span></span>                     <span></span>                 </li>             </ul>             <p></p>         </div>     </div> </template> <style lang="less">     @import "../less/public";     @skeleton:#eee;     .skeleton{         width: 100%;         height: 100vh;         overflow: hidden;         background: #fff;         section{             width: 100%;             height: 205px;             background:@skeleton;             animation: sport .2s;         }         .center{             .dec{                 li{                     width: 100%;                     height: 34px;                     margin: 30px 0;                     padding: 0 @padding20px;                     box-sizing: border-box;                     display: flex;                     justify-content: space-between;                     span{                         width: 100px;                         background: @skeleton;                     }                 }                 li:first-of-type{                     height: 44px;                 }             }             .features{                 display: flex;                 align-content: center;                 li{                     flex: 1;                     text-align: center;                     i{                         display: inline-block;                         width: 60px;                         height: 60px;                         background: @skeleton;                         border-radius: 50%;                         vertical-align: middle;                     }                     span{                         position: relative;                         left:-20px;                         top:-6px;                         display: inline-block;                         width: 120px;                         height: 40px;                         background: @skeleton;                     }                 }             }         }         .detail{             margin-top: @padding20px;             ul{                 li{                     width: 100%;                     display: flex;                     height: 44px;                     padding: 0 @padding20px;                     box-sizing: border-box;                     justify-content: space-between;                     margin-bottom: 10px;                     span{                         width: 300px;                         background: @skeleton;                     }                     span:first-of-type{                         width: 150px;                     }                 }                 li:first-of-type{                     height: 54px;                 }             }             p{                 width: 60%;                 height: 54px ;                 background: @skeleton;                 margin-left: @padding20px;                 margin-top: @padding20px;             }         }     }     @keyframes sport {         0%{background: #fff}         100%{background: @skeleton}     } </style>

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

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

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项目骨架屏的全部配置过程！！！