vue首页骨架屏vue-skeleton-webpack-plugin插件的使用

安装

npm install vue-skeleton-webpack-plugin

使用
1.在 webpack.dev.conf.js和webpack.prod.conf.js中引入插件

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

plugins: [
    new SkeletonWebpackPlugin({
        webpackConfig: {
            entry: {
                app: resolve('./src/entry-skeleton.js')
            }
        }
    })
]

2.创建骨架屏组件 src/skeleton.vue

3.创建骨架屏组件的入口文件src/entry-skeleton.js

import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import skeleton from './skeleton';
export default new Vue({
    components: {
        skeleton
    },
    template: ''
});

4.npm run dev / npm run build

市场上还有很多的骨架屏的项目的实践（根据项目的场景来选择合适的）