Ошибка Vuetify: «Ошибка в ловушке beforeCreate:« Ошибка: Vuetify неправильно инициализирован » - PullRequest
Новая
       30

Ошибка Vuetify: «Ошибка в ловушке beforeCreate:« Ошибка: Vuetify неправильно инициализирован »

0 голосов
/ 29 января 2020

В настоящее время я пытаюсь включить Vuetify в отдельные Vue компоненты в NET Core 3 веб-проекте с TypeScript. Насколько я понимаю, Vuetify предназначен для использования в SPA, но я хотел бы сделать отдельные cs html страницы с тегами Vue компонента. Проект строится и запускается, но я получаю сообщение об ошибке, как в заголовке выше. Он указывает мне на документацию , но когда я пытаюсь это сделать, я получаю ошибки, говорящие о том, что мне нужен файл декларации. Я признаю, что у меня минимальный опыт работы с TypeScript, но может ли кто-нибудь указать в правильном направлении то, что мне не хватает? Ниже приведены соответствующие фрагменты кода:

Заранее спасибо!

Index.cs html

@{
    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>

1 Ответ

0 голосов
/ 31 января 2020

Согласно документам у вас должно быть 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')
...