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

Question

我尝试遵循Vuetify 网站上的CDN 使用示例，但出现以下错误：

[Vue warn]: 未知的自定义元素: <v-list-tile>- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
[Vue warn]: 未知的自定义元素: <v-list-tile-action>- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
[Vue warn]: 未知的自定义元素: <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"
                  height="100"
                  width="100"
                >
                <div>bla bla bla</div>
                </v-card>
              </v-sheet>
            </v-flex>
          </v-layout>
        </v-container>
      </v-item-group>
    </v-content>
  </div>

Answer 1

我相信您使用当前版本 2.0.3 只需将所有“tile”替换为“item”，<v-list-tile>例如<v-list-item>