如何修复错误并在Laravel / Vue应用程序中正确使用Vuetify

Question

我有问题。我将Vuetify安装到了现有的Laravel应用程序中（当然我之前已经安装了Vue）。我的朋友开始使用vuetify创建模板。然后我们在控制台中发现错误。

错误是：

  

“ app”已被删除，请改用“

”。

该应用程序正常运行，但出现此错误。我认为这是因为我们使用的应用程序不正确。我试图通过几种方法将Vue组件包括到刀片模板中，但是效果并不理想。我尝试在刀片中使用<v-app>，<app>，从App.vue中删除<v-app>并无效地混合了多种方式。

这是我的app.js的一部分：

const app = new Vue({  
   el:'#app',
   router,
   store,
   vuetify,
   render:h => h(App)
});

这是App.vue

<template>
  <v-app>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

这是刀片模板，其中包含vue组件。

@extends('setup')
  @section('app')
     <div id="app">
        <App></App>
     </div>
  @endsection

如何在刀片中包含App组件？

Answer 1

这看起来像是Vuetify版本控制问题。在旧版本的Vuetify中，您可以使用<v-toolbar app></v-toolbar>创建一个应用栏。现在API发生了更改（从2.0+版本开始。如果您是从npm下载的，我猜您已经获取了最新版本）-您必须使用<v-app-bar app></v-app-bar>来代替向工具栏添加“ app”道具。这是错误的来源。

关于如何在应用程序中正确包含Vue和Vuetify，在使用Vuetify时必须 使用v-app标签。您必须使用ID标识您的Vue应用。典型的语法是：

<div id="app">
    <v-app>
        Your code here
    </v-app>
</div>