vue 页面骨架屏 尼古拉斯

骨架屏的意思就是，在页面数据没有渲染完成之前，把页面的答题框架展示出来，解决白屏问题，提升用户体验

骨架屏实现方式有三种：

一、图片代替：不灵活，且图片加载也是需要时间的，不推荐

二、页面结构写死：不灵活，不能复用，如果多个页面需要用到，得写多个，不推荐

三、通过webpack配置：可灵活配置，可复用，推荐（本篇讲解）

1、安装两个插件 

　　npm install vue-skeleton-webpack-plugin

　　npm install vue-server-renderer

2、在src/components文件夹下新建一个 skeleton 文件夹，skeleton文件下新建

　　skeleton-entry.js （入口配置文件）

　　

 　　Skeleton.vue （骨架结构文件）样式随你写，不再多说

　　

3、根目录新建webpack配置文件 vue.config.js

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
const path = require('path')
module.exports = {
    publicPath:'./',
 
    chainWebpack: config => {
        // 其他配置
        config.entry('main').add('babel-polyfill') // main是入口js文件
        // 其他配置
    },
     css: {
         extract: true, // css拆分ExtractTextPlugin插件，默认true - 骨架屏需要为true
     },
    lintOnSave: false,
    configureWebpack: (config) => {
        // vue骨架屏插件配置
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: path.join(__dirname, './src/components/skeleton/skeleton-entry.js'),
                },
            },
            minimize: true,
            quiet: true,
            router:{
                mode:'hash',
                routes:[
                    { path: '/', skeletonId: 'skeleton' }
                    // { path: 'aboute', skeletonId: 'skeleton1' },如果需要配置多个，直接在routes下新增路由对象即可
                ]
            }
        }))
    },
};

完整项目结构：

OK，骨架屏完成