vue项目中使用骨架屏的方法

为了让用户在等待页面加载的过程中获得更好的体验，我们可以在Vue项目中使用骨架屏。下面是具体的操作步骤。

步骤1. 安装依赖

我们需要安装vue-skeleton-webpack-plugin这个插件来实现骨架屏的效果。可以使用以下命令进行安装：

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

步骤2. 增加插件

在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: 'history',
          routes: [
            { path: '/', skeletonId: 'home' },
            { path: '/about', skeletonId: 'about' },
          ]
        }
      })
    ]
  }
}

这个配置文件需要修改的地方比较多，主要是以下几点：

• entry需要修改成你自己的skeleton.js文件路径。
• router里面的routes是对应项目的路由路径和对应的id。

步骤3. 创建skeleton.js文件

在项目根目录中创建skeleton.js文件，这个文件的作用是生成骨架屏需要的模板。示例代码如下：

import Vue from 'vue';
import App from './App.vue';

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

步骤4. 创建骨架屏模板

在你的App.vue文件中增加以下代码：

<template>
  <div>
    <!-- 正常的页面内容 -->
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>

    <!-- 骨架屏模板 -->
    <div v-if="$root.$skeletonId === 'home'">
      <h3>{{ 'loading...' }}</h3>
    </div>

    <div v-if="$root.$skeletonId === 'about'">
      <h3>{{ 'loading...' }}</h3>
    </div>
  </div>
</template>

这个骨架屏模板需要配合上一步的skeleton.js文件才能正常工作。

示例1

以一个简单的列表页为例，在/list路由路径下展示一个骨架屏。

首先在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: 'history',
          routes: [
            { path: '/', skeletonId: 'home' },
            { path: '/list', skeletonId: 'list' },
          ]
        }
      })
    ]
  }
}

然后在List.vue组件中增加以下内容：

<template>
  <div>
    <h1>My List Page</h1>

    <div v-if="$root.$skeletonId === 'list'">
      <h3>{{ 'loading...' }}</h3>
    </div>

    <div v-else>
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.title }}</li>
      </ul>
    </div>
  </div>
</template>

当用户访问/list路径时，会自动显示骨架屏模板，等待内容加载完毕后，会自动切换到正常内容。

示例2

以一个比较复杂的页面为例，展示一个包含多个部分的骨架屏。

首先在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: 'history',
          routes: [
            { path: '/', skeletonId: 'home' },
            { path: '/detail', skeletonId: 'detail' },
          ]
        }
      })
    ]
  }
}

然后在Detail.vue组件中增加以下内容：

<template>
  <div>
    <h1>{{ title }}</h1>

    <div class="detail-left">
      <div v-if="$root.$skeletonId === 'detail'">
        <div class="detail-content"></div>
      </div>
      <div v-else>
        <!-- 左侧内容 -->
      </div>
    </div>

    <div class="detail-right">
      <div v-if="$root.$skeletonId === 'detail'">
        <div class="detail-sidebar"></div>
      </div>
      <div v-else>
        <!-- 右侧内容 -->
      </div>
    </div>
  </div>
</template>

这个示例中，我们使用了两个不同的骨架屏模板：一个是左侧内容的模板，一个是右侧内容的模板。当用户访问/detail路径时，页面会自动显示骨架屏，等待页面内容加载完毕后，会自动切换到正常内容。

以上就是Vue项目中使用骨架屏的完整攻略。具体的实现方式可能因项目情况有所变化，但以上方法可以作为基本的实现方式，适用于大多数场景。