当前位置：首页 > VUE

vue实现页面骨框架

2026-02-23 17:54:49VUE

Vue 实现页面骨架屏的方法

骨架屏（Skeleton Screen）是一种在页面数据加载前展示的占位图，能够提升用户体验。以下是几种实现方式：

使用 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: 40px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  margin-bottom: 15px;
  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

该插件能自动生成骨架屏并与路由结合：

安装插件：

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

创建骨架屏组件 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
   })
 ]
}
}

结合路由实现按需加载

通过路由元信息控制骨架屏显示：

const routes = [
  {
    path: '/detail',
    component: () => import('@/views/Detail.vue'),
    meta: { skeleton: true }
  }
]

在全局路由守卫中处理：

router.beforeEach((to, from, next) => {
  if (to.meta.skeleton) {
    store.commit('setLoading', true)
  }
  next()
})

使用第三方库 vue-content-loader

该库提供更丰富的预制形状：

安装：
```
npm install vue-content-loader
```

使用示例：


<template>
<content-loader>
 <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
 <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
 <circle cx="25" cy="65" r="20" />
 <rect x="60" y="50" rx="3" ry="3" width="170" height="10" />
</content-loader>
</template>

import { ContentLoader } from 'vue-content-loader' export default { components: { ContentLoader } } ```

动态数据适配的骨架屏

对于动态内容，可以计算元素尺寸生成匹配的骨架：

export default {
  data() {
    return {
      skeletonRects: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      const elements = document.querySelectorAll('.dynamic-item')
      this.skeletonRects = Array.from(elements).map(el => {
        const rect = el.getBoundingClientRect()
        return {
          width: rect.width,
          height: rect.height,
          top: rect.top,
          left: rect.left
        }
      })
    })
  }
}