javascript - 未知的自定义元素 : in Root when using vue with laravel

Question

我正在尝试将 vue 和 vuetify 与 Laravel 一起使用。我已经有一个 vue 组件可以在没有 Vuetify 的情况下正常工作。当我安装 vuetify v1.5.1 并尝试使用 v-btn(包括 v-app)时，它在控制台中出现此错误。

我使用这些版本 “手写笔”:“^0.54.5”， "stylus-loader": "^3.0.2", “vue”:“^2.6.6”， “vue-template-compiler”:“^2.6.6”

app.js

require('./bootstrap');
import 'vuetify/dist/vuetify.min.css'
window.Vue = require('vue');
import Vuetify from 'vuetify'


Vue.component('example-component', 
require('./components/ExampleComponent.vue').default);

Vue.component('daily-delivery-planner', 
require('./components/DailyDeliveryPlanner.vue').default);

Vue.use(Vuetify);

const app = new Vue({
    el: '#app'
});`

DailyDeliveryPlanner.vue

`<template>
<div class="page-content browse container-fluid">
  <div class="row">
      <div class="col-md-12">
          <div class="panel panel-bordered">
              <div class="panel-body">
                <div class="col-md-9">
                  <div class="form-group row">
                      <label for="day" class="col-sm-1 col-form-label custom-label">Select A Day</label>
                      <div class="col-sm-9">
                        <v-btn color="success">Success</v-btn>
                      </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="">
                      <h4>Route Plan Code : <span class="label label-info" id="routeplanno">{{ routeplan_no }}</span></h4>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
</div>

</template>

<script>
    export default {

        data() {
           return {
             routeplan_no: "",
          };
       },

       methods: {
        getUserData: function() {
            axios.get('retreiveUserData')
                .then(({data}) => {
                    if(data.alert=='success'){
                        this.routeplan_no = data.data;
                    }else{
                        this.routeplan_no = Math.floor(1000 + Math.random() * 9000);
                    }
                });
        }
    },
    beforeMount() {
        this.getUserData();
    }
}
</script>`

功能和一切正常，但唯一的问题是我无法使用 vuetify 组件。

浏览.blade.php

@extends('voyager::master')

@section('content')
<v-app id="app">
    <daily-delivery-planner></daily-delivery-planner>
</v-app>

@endsection`

为什么会发生这种情况？任何帮助将不胜感激!

Answer 1

v-app 的 id 为 app，它由 New Vue() 初始化，然后您将其初始化为组件也是如此，因此它被 Vue 初始化了两次。另外，错误还表明你的Vue版本太低。