Vue-Cli 3.x 的 SPA 项目嵌入骨架屏

背景

自从饿了么的 PWA 升级实践这篇文章推出以后，许多网站都开始使用骨架屏作为优化加载体验的选项。

用法

package

在这里，我使用的是 vue-skeleton-webpack-plugin 这个插件。

步骤

• 安装 vue-skeleton-webpack-plugin

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

• 创建 skeleton.vue
• 创建 entry-skeleton.js

import Vue from 'vue';
import Skeleton from './sketelon.vue';

export default new Vue({
  components: {
    Skeleton
  },

  render: h => h(Skeleton)
});

• 在 vue.config.js 中进行相应配置

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

module.exports = {
  // ...

  configureWebpack: {
    // ...

    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/app/entry-skeleton.js')
          }
        }
      })
    ]
  }

// ...
};

完成