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，骨架屏完成