Vue implementa pantalla esqueleto (esqueleto)

Pasos para realizar la pantalla de esqueleto en Vue:
1. Instale el complemento de pantalla de esqueleto:

npm install vue-skeleton-webpack-plugin

2. Dado que el complemento de la pantalla esqueleto se basa en la representación del lado del servidor, instale vue-server-renderer

npm install vue-server-renderer

3. Cree un nuevo directorio de esqueleto en src> components y cree index.vue y entry.skeleton.js en él, como se muestra a continuación:

4. Escriba el estilo de la pantalla de esqueleto en index, vue, que generalmente es consistente con el diseño de la página de inicio, por ejemplo:

<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. Configure el archivo de entrada de entry.skeleton.js:

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

6. Cree un webpack.skeleton.conf.js en la carpeta de compilación:

'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. Incluir en webpack.dev.conf.js y webpack.pro.conf.js o unificado en webpack.base.conf.js por separado:

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

Luego impórtelos por separado en complementos:

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

¡Lo anterior es todo el proceso de configuración de la pantalla del esqueleto del proyecto Vue! ! !