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

Question

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

错误是：

'app' 已被删除，请改用 ''。

该应用程序运行正常，但出现此错误。我认为这是因为我们错误地使用了该应用程序。我试图通过几种方式将 Vue 组件包含到刀片模板中，但都不是很好。我试着用<v-app>，<app>在刀片，删除<v-app>从App.vue和混合不同的方式抿着嘴。

这是我的 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>