Vuetify 错误：“beforeCreate 挂钩中的错误：“错误：Vuetify 未正确初始化”答案

【问题标题】：Vuetify error: "Error in beforeCreate hook: "Error: Vuetify is not properly initialized"Vuetify 错误：“beforeCreate 挂钩中的错误：“错误：Vuetify 未正确初始化”
【发布时间】：2020-05-15 04:38:17
【问题描述】：

我目前正在尝试使用 TypeScript 将 Vuetify 合并到 NET Core 3 Web 项目中的单个 Vue 组件中。我的理解是 Vuetify 旨在用于 SPA，但我想使用 Vue 组件标签来制作单独的 cshtml 页面。该项目构建并运行，但我收到如上标题中的错误。它指向documentation，但是当我尝试这样做时，我收到错误消息，说我需要一个声明文件。我承认，我对 TypeScript 的经验很少，但是有人能指出我所缺少的正确方向吗？下面是相关代码sn-ps：

提前致谢！

索引.cshtml

@{
    ViewData["Title"] = "Home";
}

@section Scripts {
    <script asp-src-include="/js/dist/home*.js"></script>
}

<div id="home">
    <home></home>
</div>

home.ts

import Vue from "vue";
import home from "./components/home.vue";

let v = new Vue({
    el: "#home",
    components: {
        home
    }
});

home.vue

<template>
    <div>
        <v-app>
            <v-container>
                <h1>Home</h1>

                <v-alert type="success">
                    I'm a success alert.
                </v-alert>
            </v-container>
        </v-app>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from "vue-property-decorator";
    import Vuetify from "vuetify";
    import "vuetify/dist/vuetify.min.css";

    Vue.use(Vuetify);

    export default class Home extends Vue {

    };
</script>

【问题讨论】：

标签： typescript vue.js asp.net-core vuetify.js

【解决方案1】：

根据文档，您应该拥有new Vuetify()，但我在您的代码中看不到它。

来自这个文档https://vuetifyjs.com/en/getting-started/quick-start：

为 Vuetify 创建一个插件文件，src/plugins/vuetify.js 以下内容：

/ src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

如果使用 vuetify-loader，请使用以下内容：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

导航到实例化 Vue 的主入口点实例并将 Vuetify 对象作为选项传入。

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

【讨论】：