基于 vue-skeleton-webpack-plugin 的骨架屏实战

让我来详细讲解“基于 vue-skeleton-webpack-plugin 的骨架屏实战”的完整攻略。

简介

随着客户端应用的普及以及前端性能要求的不断提高，页面骨架屏方案得到了广泛的应用。Vue.js 作为目前最受欢迎的前端框架之一，也有很多骨架屏方案可供选择。在这里，我们以 vue-skeleton-webpack-plugin 为例，介绍使用骨架屏实现页面渲染优化的方法。

基本使用方法

1. 安装插件

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

1. 修改 webpack 配置：

```js
const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
// ...
plugins: [
new VueSkeletonWebpackPlugin({
webpackConfig: {
entry: {...}, // 指定骨架屏组件的入口文件
},
minimize: true, // 是否压缩 HTML 模板，默认为 true
quiet: true, // 是否开启日志输出，默认为 true
}),
],
// ...
}
```

1. 编写骨架屏组件

在指定的骨架屏组件入口文件中，按照 vue 组件的方式编写骨架屏代码。例如：

```html

```

1. 在需要使用骨架屏的页面中，通过 Skeleton 组件引入骨架屏组件：

```html

```

通过 Skeleton 包裹实际渲染组件，即可在组件渲染完成前显示出骨架屏，从而提升页面渲染体验。注意，在以上示例代码中我们需要将 Skeleton 和实际组件 MyComponent 都注册为 Vue 组件。

示例一

下面我们通过一个开源项目VueCnodeJS来演示如何使用vue-skeleton-webpack-plugin插件实现骨架屏效果。在这个项目中，我们将其首页（即话题列表页）作为实际页面，在这个页面中应用骨架屏。

安装 vue-skeleton-webpack-plugin

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

修改 webpack 配置

由于 VueCnodeJS 项目使用的是 vue-cli搭建的，因此我们可以通过在 package.json 中配置 vue 的 webpack 配置来修改 webpack 配置。具体操作如下：

1. 在 package.json 的 vue 字段中添加 chainWebpack 函数，并在其中使用 vue-skeleton-webpack-plugin。

```json
{
"vue": {
"chainWebpack": config => {
const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

     // 添加骨架屏 webpack 插件
     config.plugin('vue-skeleton-webpack-plugin').use(VueSkeletonWebpackPlugin, [
       {
         webpackConfig: {
           entry: require('path').resolve(__dirname, './src/skeleton/index.js'),
         },
         minimize: true,
         quiet: true,
       },
     ]);
   }
 }

}
```

webpackConfig.entry 表示使用骨架屏的组件所在的 JS 文件的路径。

1. 在 package.json 的 scripts 字段中添加一个脚本命令，用于运行 VueCnodeJS 项目。

json
{
"scripts": {
"start": "vue-cli-service serve --open"
}
}

编写骨架屏组件

按照我们在“基本使用方法”章节中介绍的规范编写骨架屏组件，这里就不再赘述。

示例代码如下：

<template>
  <div class="skeleton">
    <div class="header">
      <div class="title"></div>
      <div class="switch">
        <div class="tab"></div>
        <div class="tab"></div>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="index in 10" :key="index">
        <div class="title"></div>
        <div class="info"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
/* 定义骨架屏样式 */
.header,
.list {
  background-color: #f0f0f0;
}

.title {
  height: 20px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

.switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab {
  height: 36px;
  width: 48px;
  background-color: #f0f0f0;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 0;
}

.info {
  height: 18px;
  width: 80%;
  margin-left: 10px;
  background-color: #f0f0f0;
}
</style>

引入骨架屏

我们在项目的 src/views/Home.vue 文件中引入骨架屏。具体操作如下：

1. 在 src/views/Home.vue 文件的顶部引入 Skeleton 组件和骨架屏组件。

```html

```

1. 在 src 目录下创建 skeleton 目录，并在其中创建 index.js 文件，作为骨架屏组件的入口文件。

```js
import Vue from 'vue';
import SkeletonComponent from './Skeleton.vue';

export default new Vue({
components: {
Skeleton: SkeletonComponent,
},
template: '',
});
```

运行项目

通过运行以下命令来启动 VueCnodeJS 项目：

npm run start

在 http://localhost:8080 查看效果。

示例二

下面我们再介绍一个场景，即当页面内有多个骨架屏时，如何处理骨架屏的数据传递问题。

在这个场景下，我们使用一个简单的例子来演示。假设我们有一个车辆列表页面，包含多个车辆信息项，每个车辆信息项的数据都需要异步加载。这时，我们可以使用骨架屏来优化页面的渲染效果。

实现思路

要实现这个效果，我们需要：

1. 编写骨架屏组件；
2. 在骨架屏组件内部，使用 props 传递异步加载数据的状态；
3. 在组件渲染的时候，通过 v-if 或 v-show 控制骨架屏的显示和隐藏。

编写代码

编写父组件

假设我们在父组件中动态渲染了多个子组件，并异步加载了每个子组件的数据。我们需要在父组件中为每个子组件准备一个对应的骨架屏，以实现优化页面渲染效果的效果。

<template>
  <div>
    <CarItem v-for="(car, index) in carList" :key="index" :car="car" />
  </div>
</template>

<script>
import CarItem from '@/components/CarItem.vue';

export default {
  components: {
    CarItem,
  },
  data() {
    return {
      carList: [],
    };
  },
  created() {
    // 异步加载数据
  },
};
</script>

编写子组件

我们在子组件中使用 props 接收父组件传来的异步加载数据的状态，并使用 v-if 或 v-show 控制骨架屏和子组件的显示和隐藏。

<template>
  <div>
    <Skeleton v-if="!loaded" />
    <div v-show="loaded">
      <div class="car-name">{{ car.name }}</div>
      <div class="car-info">{{ car.info }}</div>
    </div>
  </div>
</template>

<script>
import Skeleton from './Skeleton.vue';

export default {
  props: {
    car: Object,
  },
  data() {
    return {
      loaded: false,
    };
  },
  mounted() {
    // 异步加载数据
  },
  methods: {
    // 异步加载数据
  },
  components: {
    Skeleton,
  },
};
</script>

编写骨架屏组件

骨架屏组件的编写方法与前面介绍的相似，这里就不再赘述了。

小结

通过前面的操作，我们将每个子组件和骨架屏进行关联，从而在同时优化页面渲染效果的情况下，实现异步加载数据的需求。