vue 移动端注入骨架屏的配置方法

下面我会详细讲解在 Vue 移动端项目中如何注入骨架屏。

什么是骨架屏？

骨架屏是一种用于提高移动端用户体验的技术，它是在页面内容还未加载完成时展示的一种占位元素，可以提高用户对页面加载进度的感知。骨架屏通常采用灰色填充块线条等元素，展示页面结构和布局，让用户感知到页面正在加载内容。

注入骨架屏的配置方法

在 Vue 移动端项目中，可以使用 vue-skeleton-webpack-plugin 插件来注入骨架屏。

步骤一：安装插件

在终端执行以下命令：

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

步骤二：添加插件配置

在 vue.config.js 文件中，添加以下配置：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/skeleton.js')
          }
        },
        minimize: true,
        quiet: true,
        router: {
          mode: 'hash',
          routes: [
            { path: '/', skeletonId: 'skeleton1' },
            { path: '/about', skeletonId: 'skeleton2' }
          ]
        }
      })
    ]
  }
}

在以上配置中：

• webpackConfig 指定了骨架屏需要使用的 entry 文件。
• minimize 表示是否需要压缩生成的骨架屏。
• quiet 表示是否需要在终端中显示骨架屏生成的详细信息。
• router 指定了路由配置，其中包括了每个路由对应的骨架屏 ID。

步骤三：编写骨架屏模板

在项目的 src 目录下，新建一个名为 skeleton.vue 的文件，用于编写骨架屏模板。以下是一个简单的示例：

<template>
  <div class="skeleton">
    <div class="avatar"></div>
    <div class="title"></div>
    <div class="description"></div>
  </div>
</template>

<style lang="scss" scoped>
  .skeleton {
    & > div {
      height: 100px;
      background-color: #f2f2f2;
      margin: 16px 0;
    }
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .title {
      width: 150px;
      height: 20px;
    }
    .description {
      width: 200px;
      height: 15px;
    }
  }
</style>

步骤四：创建入口文件

在项目的 src 目录下，新建一个名为 skeleton.js 的文件，用于创建骨架屏的 Vue 实例。

import Vue from 'vue'
import skeleton from './skeleton.vue'

export default new Vue({
  render: h => h(skeleton)
})

示例说明一：生成一个简单骨架屏

如果您需要生成一个简单的骨架屏来占位整个页面，您可以参考以下示例代码：

<template>
  <div class="skeleton">
    <div class="skeleton-box"></div>
  </div>
</template>

<style lang="scss" scoped>
.skeleton {
  .skeleton-box {
    background: #f2f2f2;
    width: 100%;
    height: 100vh;
  }
}
</style>

在 skeleton.vue 文件中，我们使用一个灰色的 .skeleton-box div 来占位整个页面。

示例说明二：自定义骨架屏模板

如果您需要根据不同的页面内容来定制不同的骨架屏模板，可以在 skeleton.vue 文件中根据具体需求进行自定义。

在以下示例中，我们使用 flex 布局并添加了头像、标题和描述来展示页面的布局和结构。

<template>
  <div class="skeleton">
    <div class="header">
      <div class="avatar"></div>
      <div class="info">
        <div class="title"></div>
        <div class="description"></div>
      </div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.skeleton {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .header {
    display: flex;
    padding: 16px;

    .avatar {
      width: 50px;
      height: 50px;
      margin-right: 16px;
      background: #f2f2f2;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .title {
        width: 100%;
        height: 20px;
        background: #f2f2f2;
        margin-bottom: 8px;
      }

      .description {
        width: 100%;
        height: 15px;
        background: #f2f2f2;
      }
    }
  }

  .container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px;

    .item {
      width: 48%;
      height: 150px;
      margin-bottom: 16px;
      background: #f2f2f2;
    }
  }
}
</style>

在以上示例中，我们使用了 flex 布局，并添加了头像、标题和描述以展示页面的布局和结构。页面内容在加载完成后将替换掉骨架屏中的元素。

步骤五：使用骨架屏

在路由中添加 skeletonId 属性，指定该路由需要使用的骨架屏 ID。

{
  path: '/',
  name: 'Home',
  component: Home,
  meta: {
    skeletonId: 'skeleton1'
  }
}

在视图组件中，添加 skeleton lazy 属性，将组件转换成懒加载组件并注入骨架屏。

<template>
  <div>
    <h2>Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
  metaInfo: {
    title: 'Home Page'
  },
  skeleton: true,
  beforeRouteEnter(to, from, next) {
    if (to.meta.skeletonId) {
      next(vm => {
        vm.$nextTick(() => {
          vm.$skeleton.complete(to.meta.skeletonId)
        })
      })
    } else {
      next()
    }
  }
}
</script>

在以上示例中，我们将 Home 组件注入了骨架屏，并在 beforeRouteEnter 钩子函数中，根据路由是否包含 skeletonId 来判断是否需要展示骨架屏，使用 $skeleton.complete 方法来完成骨架屏生成。

到这里，Vue 移动端注入骨架屏的配置方法就介绍完了。具体操作中还需根据实际情况调整配置。