ASP.NET Core MVC и Vuetify - [Vue warn]: неизвестный пользовательский элемент:Вы правильно зарегистрировали компонент? - PullRequest
Новая
       83

ASP.NET Core MVC и Vuetify - [Vue warn]: неизвестный пользовательский элемент:Вы правильно зарегистрировали компонент?

0 голосов
/ 19 сентября 2019

Я новичок в Vue / Vuetify.Я понятия не имею, что я делаю, поэтому будьте осторожны.

Я пытаюсь интегрировать Vue / Vuetify с моим приложением ASP.NET Core MVC, и это не очень хорошо.У меня проблема с куриным яйцом: если я поставлю скрипт перед HTML, он не сможет найти элемент #app;и если я поставлю скрипт после HTML, он задыхается и выдает сообщение [Vue warn]: Unknown custom element: <v-app> did you register the component correctly?.Я пытался создать экземпляр new Vue(Vuetify) везде - на странице макета, странице индекса и т. Д., Но ничего не получается.

У меня есть обычная страница макета: 

<!-- Layout.cshtml -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="~/css/site.css" />
</head>

<body class="container-fluid">
    <partial name="_NavigationMenuPartial" />
    <partial name="_CookieConsentPartial" />

     <main role="main" class="container-fluid mt-4">
        <div class="body-margin-x">
            @RenderBody()
        </div>
    </main>

    @RenderSection("Scripts", required: false)

</body>

</html>

На странице содержимогоУ меня есть что-то вроде этого: 

// reports/index.cshtml

<h2> Content Page</h2>

<form id="app">
    <v-app>
      <!-- other Vuetify controls -->
    </v-app>
</form>

@section Scripts
{
    <script src="~/dist/reports.js" asp-append-version="true"></script>
}

и reports.js довольно стандартно: 

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

Vue.use(Vuetify);

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader

var vue = new Vue({
  el: '#app',
  vuetify: 'new Vuetify({}),
  data: {...},
  computed: {...},
  methods: {...},
});

… но, как я уже сказал, это не работает.

Если я помещаю файл reports.js перед элементом v-app, он жалуется, что не может найти элемент #app - что имеет смысл, поскольку он работает до того, как остальная часть файла будетзагружен.

Если я оставлю его в разделе scripts, я получу ошибку unknown custom element: v-app ...

Должен ли я переместить элемент v-app в файл js иназвать это .vue?Какого черта я здесь делаю не так?

...