通过 CDN 加载 Vuetify 时获取“未知自定义元素”

Posted 2023-02-22

【中文标题】通过 CDN 加载 Vuetify 时获取“未知自定义元素”

【英文标题】：Getting 'Unknown custom element' when Vuetify is loaded via CDN

【发布时间】：2019-12-07 06:00:10

【问题描述】：

我已尝试在 Vuetify website 上遵循 CDN 用法 示例，但出现以下错误：

[Vue 警告]：未知的自定义元素：<v-list-tile> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。 [Vue 警告]：未知的自定义元素：<v-list-tile-action> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。 [Vue 警告]：未知的自定义元素：<v-list-tile-content> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

参见codepen 的示例。

JS：

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: 
    drawer: false,
    app_title: 'Custom Name...',
    elevations: [6, 12, 24],
    tiles: [4,5,6,7,8,9]
  ,
)

html：

  <div id="app">
    <v-navigation-drawer
      v-model="drawer"
      temporary
      fixed
      app
    >
      <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>contact_mail</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Report</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="#213f5e" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>app_title</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-item-group>
        <v-container fluid fill-height grid-list-md>
          <v-layout
            flex-child
            wrap
          >
            <v-flex
              v-for="tile in tiles"
              :key="tile"
              xs12
              md4
            >
              <v-sheet
                class="pa-5"
                color="grey lighten-3"
              >
                <v-card
                  :elevation="8"
                  class="mx-auto"
                  
                  
                >
                <div>bla bla bla</div>
                </v-card>
              </v-sheet>
            </v-flex>
          </v-layout>
        </v-container>
      </v-item-group>
    </v-content>
  </div>

【参考方案1】：

我相信你使用的是当前版本 2.0.3 只需将所有 'tile' 替换为 'item'，例如 <v-list-tile> 到 <v-list-item>