当前位置：首页 > VUE

vue骨架屏技术实现

2026-02-24 15:43:10VUE

vue骨架屏技术实现

骨架屏（Skeleton Screen）是一种优化用户体验的技术，在页面加载时展示占位内容，避免白屏或闪烁问题。以下是Vue中实现骨架屏的几种方法：

使用第三方库

vue-skeleton-webpack-plugin是一个常用插件，通过Webpack在构建时生成骨架屏。安装后配置vue.config.js：

vue骨架屏技术实现

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

skeleton.js中定义骨架屏组件并导出：

import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
  components: { Skeleton },
  template: '<skeleton />'
});

手动编写组件

创建一个.vue文件定义骨架屏结构，使用CSS控制样式：

vue骨架屏技术实现

<template>
  <div class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-body">
      <div class="skeleton-item" v-for="i in 4" :key="i"></div>
    </div>
  </div>
</template>

<style>
.skeleton {
  background: #fff;
}
.skeleton-item {
  height: 20px;
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
</style>

条件渲染控制

在主组件中通过v-if切换真实内容和骨架屏：

<template>
  <div>
    <real-content v-if="!loading" />
    <skeleton-screen v-else />
  </div>
</template>

<script>
export default {
  data() {
    return { loading: true }
  },
  mounted() {
    fetchData().then(() => this.loading = false);
  }
}
</script>

SSR场景下的实现

对于Nuxt.js项目，可在布局文件中动态注入骨架屏：

// layouts/default.vue
export default {
  data() {
    return { isHydrating: true }
  },
  mounted() {
    this.isHydrating = false;
  }
}

<template>
  <div>
    <client-only>
      <real-content v-if="!isHydrating" />
      <skeleton-placeholder v-else />
    </client-only>
  </div>
</template>