未知的自定义元素：将 vue 与 laravel 一起使用时，Root 中的 <v-app>答案

【问题标题】：Unknown custom element: <v-app> in Root when using vue with laravel未知的自定义元素：将 vue 与 laravel 一起使用时，Root 中的 <v-app>
【发布时间】：2019-07-13 03:10:20
【问题描述】：

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

我使用这些版本 "stylus": "^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 组件。

browse.blade.php

@extends('voyager::master')

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

@endsection`

为什么会这样？任何帮助将不胜感激！

【问题讨论】：

标签： javascript laravel vue.js vuetify.js

【解决方案1】：

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

【讨论】：