初始化拉取，原文件名：admin-plus-webpack5

library/components/VabCard/index.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+    defineProps({
+        header: {
+            type: String,
+            default: '',
+        },
+        bodyStyle: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+        },
+        shadow: {
+            type: String,
+            default: 'never',
+        } as any,
+        skeleton: {
+            type: Boolean,
+            default: false,
+        },
+        skeletonRows: {
+            type: Number,
+            default: 4, //显示的数量会比传入的数量多 1
+        },
+    })
+
+    let timer: any = null
+    const skeletonShow = ref(true)
+
+    timer = setTimeout(() => {
+        skeletonShow.value = false
+    }, 500)
+
+    onBeforeRouteLeave((to, from, next) => {
+        clearInterval(timer)
+        next()
+    })
+</script>
+
+<template>
+    <el-card :body-style="bodyStyle" class="vab-card" :shadow="shadow">
+        <template v-if="$slots.header || header" #header>
+            <slot name="header">{{ header }}</slot>
+        </template>
+        <el-skeleton
+            v-if="skeleton"
+            animated
+            :loading="skeletonShow"
+            :rows="skeletonRows"
+        >
+            <template #default>
+                <slot class="vab-card-transition" />
+            </template>
+        </el-skeleton>
+        <slot v-else class="vab-card-transition" />
+    </el-card>
+</template>
+
+<style lang="scss" scoped>
+    .vab-card {
+        &-transition {
+            transition: $base-transition;
+        }
+    }
+</style>