Thành phần Vue không hiển thị khi sử dụng hộ chiếu trong laravel 5.3

Question

Như bạn có thể thấy từ tiêu đề tôi đang thử Laravel 5.3 và hộ chiếu.

Vì vậy, tôi đã trải qua các bước để cài đặt hộ chiếu Laravel và theo như tôi có thể thấy mọi thứ đã sẵn sàng.

Tôi đã đưa các thành phần tương ứng Vue vào đánh dấu của home.blade.php của tôi như sau để kiểm tra theo các tài liệu mà tôi đã làm như vậy

@extends('layouts.app') 

@section('content') 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Dashboard</div> 

       <div class="panel-body"> 
        You are logged in! 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<passport-clients></passport-clients> 
<passport-authorized-clients></passport-authorized-clients> 
<passport-personal-access-tokens></passport-personal-access-tokens> 
@endsection 

Vue được phát hiện như chạy trong dev của tôi tuy nhiên các công cụ không có thành phần Vue nào đang hiển thị.

Đây là app.js tôi

Vue.component('example', require('./components/Example.vue')); 

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


Vue.component(
'passport-clients', 
require('./components/passport/Clients.vue') 
); 

Vue.component(
    'passport-authorized-clients', 
    require('./components/passport/AuthorizedClients.vue') 
); 

Vue.component(
    'passport-personal-access-tokens', 
    require('./components/passport/PersonalAccessTokens.vue') 
); 

Tôi nhận được lỗi

vue.common.js?4a36:1019 [Vue warn]: Unknown custom element: <passport-clients> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 

Bất kỳ ý tưởng làm thế nào tôi có thể sửa lỗi này? Tôi khá mới để Vue

Answer 1

Trong app.js của bạn tệp, nhập các thành phần ngay bên dưới hoặc thay cho thành phần example, nhưng trước khi tạo đối tượng Vue mới, nơi nó được gắn kết với DOM.

Đừng quên chạy gulp. :)

Answer 2

tôi đã cùng một vấn đề và nó bật ra rằng điều này quan trọng: đặt mã

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

tại END của tập tin app.js.

Bắt đầu hiển thị các thành phần trên trang web.

Answer 3

tôi đã cùng một vấn đề với độ phân giải sau với Laravel 5.4:

Tìm resources/assets/app.js.

1. đặt tất cả Vue.component... trước new Vue (không phải sau)
2. trong mỗi Vue.component 's import, thêm .default

Vue.component(
    'passportclients', 
    require('./components/passport/Clients.vue').default 
); 

Vue.component(
    'passportauthorizedclients', 
    require('./components/passport/AuthorizedClients.vue').default 
); 

Vue.component(
    'passportpersonalaccesstokens', 
    require('./components/passport/PersonalAccessTokens.vue').default 
); 

Và sau đó chạy npm run dev một lần nữa.

Answer 4

Tôi đã cố định vấn đề đó, chúng tôi không cần phải bao gồm bất kỳ thư viện Vue, laravel theo mặc định cung cấp này (đây là cho laravel 5.4 và>):

Tới dự án-thư mục của bạn// public js /app.js

Tìm mã nơi khách hàng hộ chiếu, khách hàng được ủy quyền hộ chiếu và mã thông báo truy cập cá nhân-hộ chiếu của bạn được đăng ký.

Thay đang với:

Vue.component('example-component', webpack_require(41)); 

Vue.component('passport-clients', webpack_require(44)); 

Vue.component('passport-authorized-clients', webpack_require(50)); 

Vue.component('passport-personal-access-tokens', webpack_require(55)); 

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

Lưu ý: Đăng ký Vue.component trước khi "Var ứng dụng = new Vue"