当前位置：首页 > VUE

vue骨架屏实现

2026-03-30 07:39:14VUE

Vue骨架屏的实现方法

骨架屏（Skeleton Screen）是一种优化用户体验的技术，在数据加载前展示页面的大致结构，避免空白或加载中的突兀感。以下是几种常见的Vue骨架屏实现方式：

使用纯CSS实现骨架屏

通过CSS动画和伪元素创建简单的骨架效果，适合轻量级需求：

<template>
  <div class="skeleton-container">
    <div class="skeleton-item" v-for="i in 5" :key="i"></div>
  </div>
</template>

<style>
.skeleton-container {
  padding: 20px;
}
.skeleton-item {
  height: 60px;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
</style>

使用vue-skeleton-webpack-plugin

该插件能在构建时自动生成骨架屏HTML，适合SPA应用：

安装依赖：

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

创建骨架屏组件：

vue骨架屏实现

<!-- Skeleton.vue -->
<template>
  <div class="skeleton-wrapper">
    <!-- 你的骨架屏结构 -->
  </div>
</template>

配置vue.config.js：

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: './src/skeleton.js'
        },
        minimize: true,
        quiet: true
      })
    ]
  }
}

使用第三方库vue-content-loader

该库提供丰富的预定义骨架屏模板和自定义功能：

安装：

vue骨架屏实现

npm install vue-content-loader

基本使用：

<template>
  <content-loader>
    <!-- 自定义SVG路径定义骨架结构 -->
    <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
    <rect x="0" y="20" rx="3" ry="3" width="220" height="10" />
  </content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'
export default {
  components: { ContentLoader }
}
</script>

动态切换真实内容与骨架屏

在实际组件中通过v-if控制显示逻辑：

<template>
  <div>
    <div v-if="loading">
      <skeleton-component />
    </div>
    <div v-else>
      <!-- 真实内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  async created() {
    await this.fetchData()
    this.loading = false
  }
}
</script>

响应式骨架屏设计

针对不同屏幕尺寸调整骨架屏布局：

.skeleton-item {
  width: 100%;
}
@media (min-width: 768px) {
  .skeleton-item {
    width: 50%;
    float: left;
  }
}
@media (min-width: 1024px) {
  .skeleton-item {
    width: 33.33%;
  }
}