Question

我开始使用Vue.js并自己使用Vuetify。这是一个疯狂但有趣的旅程！我遇到了一些问题，我不确定这是错误还是我自己的问题。我一直在Vuetify网站上运行这些教程，并在我的Controle上遇到了这个错误

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:588 [Vue warn]: Unknown custom element: <v-tooltip> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:588 [Vue warn]: Unknown custom element: <v-checkbox> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

下面是我受影响的代码（它们与教程中的代码相似）

<template>
  <v-container fluid>
    <v-slide-y-transition mode="out-in">
      <v-layout column align-center>
        <h1>
          Dashboard
        </h1>
        <br/><br/>
        <v-data-table
           :headers="headers"
           :items="desserts"
           :search="search"
           v-model="selected"
           item-key="name"
           select-all
           class="elevation-1"
         >
           <template slot="headerCell" slot-scope="props">
             <v-tooltip bottom>
               <span slot="activator">
                 {{ props.header.text }}
               </span>
             </v-tooltip>
           </template>
           <template slot="items" slot-scope="props">
             <td>
               <v-checkbox
                 v-model="props.selected"
                 primary
                 hide-details
               ></v-checkbox>
             </td>
             <td>{{ props.item.name }}</td>
             <td class="text-xs-right">{{ props.item.calories }}</td>
             <td class="text-xs-right">{{ props.item.fat }}</td>
             <td class="text-xs-right">{{ props.item.carbs }}</td>
             <td class="text-xs-right">{{ props.item.protein }}</td>
             <td class="text-xs-right">{{ props.item.iron }}</td>
           </template>
         </v-data-table>
      </v-layout>
    </v-slide-y-transition>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      pagination: {
        sortBy: 'name'
      },
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' }
      ],
      desserts: [
        {
          value: false,
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%'
        },
        {
          value: false,
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%'
        },
        {
          value: false,
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%'
        },
        {
          value: false,
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%'
        },
        {
          value: false,
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%'
        },
        {
          value: false,
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%'
        },
        {
          value: false,
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%'
        },
        {
          value: false,
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%'
        },
        {
          value: false,
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%'
        },
        {
          value: false,
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%'
        }
      ]
    }),

    methods: {
      toggleAll () {
        if (this.selected.length) this.selected = []
        else this.selected = this.desserts.slice()
      },
      changeSort (column) {
        if (this.pagination.sortBy === column) {
          this.pagination.descending = !this.pagination.descending
        } else {
          this.pagination.sortBy = column
          this.pagination.descending = false
        }
      }
    }
  }
</script>

此外，我的Vuetify.js如下：

import Vue from 'vue'
import {
  Vuetify,
  VApp,
  VNavigationDrawer,
  VFooter,
  VList,
  VBtn,
  VIcon,
  VGrid,
  VToolbar,
  VDataTable,
  transitions
} from 'vuetify'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VList,
    VBtn,
    VIcon,
    VGrid,
    VToolbar,
    VDataTable,
    transitions
  },
  theme: {
    primary: '#0D47A1',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  },
})

我的main.js是：

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

感谢我可以获得的任何帮助！让我知道是否需要上传更多代码。

Answer 1

好吧，它们没有注册，因为您没有在Vuetify.js中导入和注册它们。您需要将它们添加到其中。

import Vue from 'vue'
import {
  Vuetify,
  VApp,
  VNavigationDrawer,
  VFooter,
  VList,
  VBtn,
  VIcon,
  VGrid,
  VToolbar,
  VTooltip, // added
  VCheckbox, // added
  VDataTable,
  transitions
} from 'vuetify'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VList,
    VBtn,
    VIcon,
    VGrid,
    VToolbar,
    VTooltip, // added
    VCheckbox, // added
    VDataTable,
    transitions
  },
  theme: {
    primary: '#0D47A1',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  },
})

如果要导入所有组件，则可以省略components参数。

Vue.use(Vuetify, {
  theme: {
    primary: '#0D47A1',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  },
})

v-tooltip和v-checkbox等Vuetify组件未正确注册

1 个答案: