vue-cli3配置骨架屏方案

vue-cli3配置骨架屏方案

前言

最近在学vue,准备使用vue写一个移动端项目。考虑到首页白屏优化，需要实现骨架屏需求。这里介绍两种方案，当然都是根据现有的轮子搭的

步骤

• 安装vue-skeleton-webpack-plugin插件

npm install --save-dev vue-skeleton-webpack-plugin

• vue.config.js配置

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

module.exports = {
   
    css: {
   
         extract: true, // css拆分ExtractTextPlugin插件，默认true - 骨架屏需要为true
    },
    
    configureWebpack: (config)=>{
   
        // vue骨架屏插件配置
        config.plugins.push(new SkeletonWebpackPlugin({
   
          webpackConfig: {
   
            entry: {
   
              app: path.join(__dirname, './src/utils/skeleton.js'),
            },
          },
          minimize: true,
          quiet: true,
        }))
  },
}

• 新建一个skeleton.js文件放在src->utils文件夹下面、

import Vue from 'vue';
import Skeleton from '../components/Skeleton/skeleton-2';

export default new Vue({
   
  components: {
   
    Skeleton,
  },
  render: h => h(Skeleton),
});

这个文件是用来注入骨架屏的

• 新建一个skeleton-2.vue骨架屏组件

<template>
  <div class="skeleton page">
    <div class="skeleton-nav"></div>
    <div class="skeleton-swiper"></div>
    <ul class="skeleton-tabs">
      <li v-for="i in 8" class="skeleton-tabs-item"><span></span><<