Vue는 스켈레톤 화면 (스켈레톤)을 구현합니다.

Vue에서 스켈레톤 화면을 구현하는 단계 :
1. 스켈레톤 화면 플러그인을 설치합니다.

npm install vue-skeleton-webpack-plugin

2. 스켈레톤 화면 플러그인은 서버 측 렌더링에 의존하므로 vue-server-renderer를 설치하십시오.

npm install vue-server-renderer

3. src> components에 새 스켈레톤 디렉토리를 생성하고, 그 안에 index.vue 및 entry.skeleton.js를 아래와 같이 생성합니다.

4. 인덱스, 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. 빌드 폴더에 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');

그런 다음 플러그인에서 별도로 가져옵니다.

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

위는 Vue 프로젝트 스켈레톤 화면의 전체 구성 프로세스입니다! ! !