基于vue-cli3的骨架屏vue-skeleton-webpack-plugin

4,450 阅读1分钟

骨架屏

  • 就是页面加载前的loading改为一个图片形式的骨架屏。 如下图:

环境

  • vue-cli3
  • spa
  • 多路由,多骨架(不同路由页面实现不同骨架屏)

github插件地址   vue-skeleton-webpack-plugin

由于官方没有基于vue-cli3多骨架 多路由的demo,在这里写一个 。

代码

目的

home.vue ---> 骨架屏1 (Skeleton1)

test.vue ---> 骨架屏2 (Skeleton2)

1.新建两个骨架屏组件

Skeleton1.vue

<template>
    <div class="skeleton1-wrapper">我是骨架屏1111111</div>
</template>

Skeleton2.vue

<template>
    <div class="skeleton1-wrapper">我是骨架屏2222222</div>
</template>

2.新建骨架屏配置js

entry-skeleton.js

  • 这里注意下seletonid,等在vue.config.js中要用到。
// - entry-skeleton.js
import Vue from 'vue';
import Skeleton1 from './Skeleton1.vue';
import Skeleton2 from './Skeleton2.vue';

export default new Vue({
  components: {
    Skeleton1,
    Skeleton2,
  },
  //render: h => h(Skeleton1,Skeleton2),
  template: `
       <div style='height: 100%;'>
           <skeleton1 id="skeleton1" style="display:none"/>
           <skeleton2 id="skeleton2" style="display:none"/>
       </div>
    `
});

3.vue.config.js中配置

//引入 插件vue-skeleton-webpack-plugin
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

 configureWebpack: (config) => {
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton/entry-skeleton.js'),//这里为上面的entry-skeleton.js
        }
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        routes: [
          {
            path: '/home', //和router.js中的路径一样就行
            skeletonId: 'skeleton1' //之前的id
          },
          {
            path: '/test',
            skeletonId: 'skeleton2'
          }
        ]
      }
    }))
  },
  
  //此插件需要css分离
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },

4.骨架屏生成器(若无ui画骨架屏)

  • vue-content-loader 里面有各种骨架屏,也可以自定义。
  • 也可以网上画好了,粘贴下来。在线生成骨架屏