详解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' }
        ]
      }
    })
  ]

总结

VUE骨架屏生成方案很多，上面介绍的只是其中两种。骨架屏能够有效提升页面的用户体验，减少用户等待时间，尤其在移动端，其效果更加明显。我们在项目中使用骨架屏来占位会更好的体现我们的专业性和敬业精神。