当前位置：首页 > VUE

vue骨架屏实现

2026-02-18 06:56:44VUE

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-item {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 10px;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
</style>

第三方库（如 vue-skeleton-webpack-plugin）

通过 Webpack 插件自动生成骨架屏，适合复杂页面结构。需配置路由匹配规则。

安装插件：

npm install vue-skeleton-webpack-plugin

配置 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
      })
    ]
  }
};

创建 skeleton.js 入口文件：

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

export default new Vue({
  components: { Skeleton },
  template: '<Skeleton />'
});

动态切换组件

结合 v-if 或异步组件，在数据加载完成后切换为实际内容。

<template>
  <div>
    <SkeletonComponent v-if="loading" />
    <RealContent v-else :data="loadedData" />
  </div>
</template>

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

使用 SVG 实现复杂骨架

通过 SVG 绘制精细的占位图形，适合不规则布局。

vue骨架屏实现

<template>
  <div class="svg-skeleton">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 150">
      <rect x="0" y="0" width="400" height="20" rx="3" fill="#f0f0f0" />
      <rect x="0" y="30" width="300" height="20" rx="3" fill="#f0f0f0" />
      <circle cx="380" cy="10" r="10" fill="#f0f0f0" />
    </svg>
  </div>
</template>