1. 自动化方案 page-skeleton-webpack-plugin

1.1 vue-cli 创建一个空项目

1.2 npm install --save-dev page-skeleton-webpack-plugin 安装创建

1.3 配置 vue.config.js

// vue.config.js

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
const path = require('path');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
        routes: ['/', '/about'], // 将需要生成骨架屏的路由添加到数组中
        device: 'iPad Pro landscape',
      }),
    ],
  },
  chainWebpack: (config) => { // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap((opts) => {
        // eslint-disable-next-line no-param-reassign
        opts[0].minify.removeComments = false;
        return opts;
      });
    }
  },
};

1.4 修正 page-skeleton-webpack-plugin 错误

// node_modules\page-skeleton-webpack-plugin\src\skeletonPlugin.js

// ...
SkeletonPlugin.prototype.createServer = function () { // eslint-disable-line func-names
  // const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
  // server.listen().catch(err => server.log.warn(err))
  if (!this.server) {
    const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
    server.listen().catch(err => server.log.warn(err))
  }
}
// ...

1.5 html 增加 shell

// public\index.html

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

1.6 device 可选项

// node_modules\puppeteer\lib\DeviceDescriptors.js

// ...
  {
    'name': 'iPad Pro landscape',
    'userAgent': 'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1',
    'viewport': {
      'width': 1366,
      'height': 1024,
      'deviceScaleFactor': 2,
      'isMobile': true,
      'hasTouch': true,
      'isLandscape': true
    }
  },

// ...

1.7 运行npm run serve 使用快捷键 ctrl + alt + enter 开始绘画骨架屏

企业微信截图_16396325505882.png

• 点击右上角开始保存

---

2.需要使用vue 手写对应骨架屏页面 vue-skeleton-webpack-plugin

2.1 安装插件 npm install vue-skeleton-webpack-plugin -D,配置 vue.config.js

// vue.config.js

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

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.resolve(__dirname, './src/skeleton/entry-skeleton.js'),
          },
        },
        quiet: true,
        minimize: true,
        router: {
          mode: 'history',
          routes: [
            {
              path: '/',
              skeletonId: 'skeleton1',
            },
            {
              path: '/about',
              skeletonId: 'skeleton2',
            },
            {
              path: '/list',
              skeletonId: 'skeleton2',
            },
          ],
        },
      }),
    ],
  },
  //  开发环境需要 手动开启拆分css
  // css: {
  //   extract: true,
  // },
};

2.2新建skeleton文件夹 和入口文件 entry-skeleton.js

// entry-skeleton.js

import Vue from 'vue';
import Skeleton1 from './Skeleton1.vue';
import Skeleton2 from './Skeleton2.vue';

export default new Vue({
  components: {
    Skeleton1,
    Skeleton2,
  },
  template: `
         <div>
             <Skeleton1 id="skeleton1" style="display:none"/>
             <Skeleton2 id="skeleton2" style="display:none"/>
         </div>
     `,
});

2.3 撰写骨架屏VUE代码 Skeleton1.vue Skeleton2.vue

// Skeleton1.vue

<template>
    <div class="skeleton1-header">1</div>
</template>

<script>
export default {
  name: 'skeleton1',
};
</script>

<style scoped>
.skeleton1-header {
    height: 52px;
    background: blue;
}
</style>