详解VUE单页应用骨架屏方案

标题：详解VUE单页应用骨架屏方案

什么是骨架屏

骨架屏即为页面骨架，通俗点来说就是一个页面还没加载完成时，所出现的一种页面展示方案。它将页面大致的结构和样式提前定义好，填充占位元素在视觉上证明了页面正在加载。而实际上用户看到的只是一个假象，等待页面正式加载完成后，占位元素会被替换成真实的内容。

骨架屏在VUE单页应用中的应用

在VUE单页应用中，页面通过异步加载，很多时候需要等待异步请求完成之后才能正式显示页面，这时候我们可以使用骨架屏来占位。

实现方法

方案1: vue-content-loader

vue-content-loader是一个基于SVG实现的VUE组件，通过内嵌SVG来实现自定义骨架屏的功能。

在使用vue-content-loader时，我们可通过参数来定义骨架屏的生成条件。示例如下：

<template>
  <content-loader :width="400" :height="500" : animate="true">
     <rect x="20" y="20" rx="4" ry="4" width="100" height="10" />
     <rect x="20" y="40" rx="3" ry="3" width="50" height="10" />
     <rect x="20" y="60" rx="3" ry="3" width="100" height="10" />
     <rect x="20" y="80" rx="6" ry="6" width="200" height="10" />
     <circle cx="30" cy="30" r="30" />
  </content-loader>
</template>

上面的代码就定义了一个带有五个元素的骨架屏，每个元素对应页面中一个具体的区域，通过参数可以定义每个元素的位置、大小、形状、动画等等。

方案2: vue-skeleton-webpack-plugin

除了vue-content-loader，我们还可以基于webpack插件来实现骨架屏的生成。vue-skeleton-webpack-plugin是一个成熟的webpack插件方案。

使用vue-skeleton-webpack-plugin，我们需要在webpack配置文件中进行相关配置。具体的流程可参见官方文档。

示例

我们可以在项目中仿照下面的示例来实现骨架屏的效果。

示例1：通过vue-content-loader来实现

在示例中，我们通过在Home.vue组件中引用vue-content-loader组件来实现骨架屏。

<template>
    <div>
        <content-loader :width="400" :height="500" : animate="true">
           <rect x="20" y="20" rx="4" ry="4" width="100" height="10" />
           <rect x="20" y="40" rx="3" ry="3" width="50" height="10" />
           <rect x="20" y="60" rx="3" ry="3" width="100" height="10" />
           <rect x="20" y="80" rx="6" ry="6" width="200" height="10" />
           <circle cx="30" cy="30" r="30" />
        </content-loader>
    </div>
</template>

示例2：通过vue-skeleton-webpack-plugin来实现

我们也可以使用vue-skeleton-webpack-plugin来实现骨架屏的效果。以下是一份简单示例：

plugins: [
    new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/entry-skeleton.js')
        }
      },
      router: {
        mode: 'hash',
        routes: [
          { path: '/home', skeletonId: 'home' },
          { path: '/info', skeletonId: 'info' }
        ]
      }
    })
  ]