vue骨架屏制作

1.需要使用到的插件：

vue-skeleton-webpack-plugin插件

 

2.建立骨架屏示例

    新建skeleton.vue文件

<template>
  <div class="skeleton1-wrapper">我是骨架屏1</div>
</template>
<script>
export default {
  name: "skeleton",
  data () {
    return {
    };
  }
}
</script>
<style lang="less" scoped>
</style>

    新建骨架屏配置文件 skeleton.js

// skeleton.js
import Vue from 'vue';
import Skeleton1 from './skeleton.vue';

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

 

3.vue.config.js配置

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

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

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : './',

    configureWebpack: (config) => {
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: path.join(__dirname, './skeleton.js'),
                },
            },
            minimize: true,
            quiet: true,
            router: {
                 mode:'history',//只支持history路由
                routes: [
                    {
                        path: '/home', //和router.js中的路径一样就行
                        skeletonId: 'skeleton1' //之前的id
                    }
                ]
            }
        }))
    }
}