前端骨架屏实现

[zhh10]

珠峰page2-skeleton-webpack-plugin插件

安装插件

npm i --save-dev page2-skeleton-webpack-plugin

vue.config.js 配置

const SkeletonPlugin = require('page2-skeleton-webpack-plugin')
const path = require('path')
const htmlWebpackPLugin = require('html-webpack-plugin')
const resolve = dir => path.join(__dirname,dir)

module.exports = {
    lintOnSave:fasle,
    publicPath:'',
    configureWebpack:{
        plugins:[
            new SkeletonPlugin({
                pathname:resolve('shell')
                // 新建一个shell文件夹
                staticDir:resolve('dist')
                routes:['/home','/page'],
                // 多路由配置 把需要配置的路由放置在这里
                port:'8090',
                grayBlock:['.port1','.port2','.port3'],
               // 灰色块 css选择器
            })
        ]
    },
    chainWebpack:config => {
        if(process.env.NODE_ENV !== 'development'){
            config.plugin('html').tap(opts => {
                opts[0].minify.removeComments = false
                return opts 
            })
        }
        config.resolve.alias 
            .set('@',resolve('src'))
    }
}

index.html

加上<!-- shell -->

<div id="app">
<!-- shell -->
</div>

在浏览器控制台输入以下代码并点击页面上方control bar唤醒

toggleBar

可以预览不同路由生产的骨架屏，手机预览，写入本地文件