未知的自定义元素：<v-calendar>答案

【问题标题】：Unknown custom element: <v-calendar>未知的自定义元素：<v-calendar>
【发布时间】：2020-01-02 03:06:53
【问题描述】：

我在尝试使用 Vuetify 的日历功能时遇到错误。我可以编译所有内容，但这是我尝试渲染时得到的：未知的自定义元素 v-calendar - 您是否正确注册了组件？

<template>
    <v-card style="margin:20px;">
        <v-calendar
            type="week"
            now="2019-01-08"
            value="2019-01-08"
            :events="events"
        ></v-calendar>
    </v-card>
</template>

<script>
    import Vue from 'vue'
    import moment from 'moment'
    import API from '@/mixins/API.js'
    import router from '@/router'
    import Vuetify, {VCalendar} from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'

    Vue.use(Vuetify, {
        VCalendar
    });
    //some more code
</script>

【问题讨论】：

您使用的是哪个 vuetify 版本？ 1.5 还是 2？
问题中代码的编写方式看起来像是将 Vuetify 直接导入 SFC。您能否确认不是这种情况，并且您实际上是在 main.js 或类似文件中执行此操作，您在其中调用 new Vue 的同一文件？
我的“日历”组件之一中有代码，但我的 main.js 文件中已经有“从 'vuetify' 导入 Vuetify”。如果我尝试从“日历”组件中导入 VCalendar，我认为这并不重要。
另外，我正在运行 Vue 2.9.6
您应该从日历组件中删除 Vuetify import/use 代码。我们需要查看main.js 的相关代码才能找出问题所在。请告诉我们您使用的是什么版本的 Vuetify？ Vue 2.9.6 不存在，我假设那是 Vue CLI 版本。

标签： vue.js vue-component vuetify.js

【解决方案1】：

您可能没有正确加载 vuetify 组件。尝试将以下代码添加到您的模板中：

<script>
import { VCalendar } from 'vuetify/lib'

export default {
    components: { VCalendar },
    ...
}
</script>

如果您不想每次都手动加载组件，您也可以check out the vuetify-loader plugin，它会自动为您添加组件。

【讨论】：