vue-cli 页面实现简单的骨架屏

​​​​骨架屏简洁简介: 

骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案

 

插件简介:  vue-skeleton-webpack-plugin

一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏 skeleton，减少白屏时间，在页面完全渲染之前提升用户感知体验。支持 webpack@3 和 webpack@4，支持 Hot reload

 

1 . 安装插件

npm install vue-skeleton-webpack-plugin

2 . src目录下创建骨架屏Skeleton.vue

3 . src目录下创建一个Skeleton.js

// - Skeleton.js
import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
  components: {
    Skeleton,
  },
  render: h => h(Skeleton),
});

4 . 根目录创建vue.config.js (和package.json一个目录)

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

module.exports = {
  configureWebpack: (config) => {
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/Skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
    }))
  },
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  }
};

5 . 运行项目, 浏览器查看, 建议调整netWork模拟网速为slow

 

参考文档: 

1 . https://www.jianshu.com/p/cb5717c5948f

2 . https://vv-ui.github.io/VV-UI/#/skeleton