为何在Vuetify 3.1.4中无法使用v-skeleton-loader组件？

1. 组件名称变更 #

Vuetify 3.x 已将原v-skeleton-loader组件重命名为v-skeleton，这是控制台抛出组件无法解析警告的直接原因。

2. 调整代码适配Vuetify 3 #

Vuetify 3移除了原v-skeleton-loader的预设类型（如table），需要通过组合v-skeleton组件来构建表格样式的骨架屏。修改后的代码示例如下：

<Suspense>
  <template #default>
    <boutique_data />
  </template>
  <template #fallback>
    <v-sheet class="px-3 pt-3 pb-3">
      <!-- 模拟表格骨架屏 -->
      <v-row v-for="i in 5" :key="i" class="mb-2">
        <v-col cols="3">
          <v-skeleton type="text" height="24" />
        </v-col>
        <v-col cols="4">
          <v-skeleton type="text" height="24" />
        </v-col>
        <v-col cols="3">
          <v-skeleton type="text" height="24" />
        </v-col>
        <v-col cols="2">
          <v-skeleton type="rect" height="24" />
        </v-col>
      </v-row>
    </v-sheet>
  </template>
</Suspense>

3. 手动导入组件（若未开启自动导入） #

如果项目未启用Vuetify的自动导入功能，需在使用组件的文件中手动导入相关组件：

import { VSkeleton, VSheet, VRow, VCol } from 'vuetify/components'

export default {
  components: {
    VSkeleton,
    VSheet,
    VRow,
    VCol
  }
}

补充说明 #

Vuetify 3对骨架屏组件做了轻量化重构，取消了预设的复杂布局类型，转而通过基础骨架组件的组合实现自定义布局，以此提供更灵活的样式控制能力。

内容的提问来源于stack exchange，提问作者gsk 42