Vue组件未在laravel 5.3中使用护照出现

Question

正如你从标题中看到的,我正在尝试Laravel 5.3和护照.

所以我已经完成了安装Laravel护照的步骤,据我所知,一切都已到位.

我已将相应的Vue组件放入我的home.blade.php的标记中,如下所示,按照我所做的文档进行测试

@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在我的开发工具中运行,但没有显示Vue组件.

这是我的app.js

 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')
);

我收到了错误

 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.

知道如何解决这个问题吗？我对Vue相当新

Answer 1

在您的app.js文件中,导入组件的下方或代替example组件,但在创建Vue绑定到DOM 的新对象之前.

别忘了跑步gulp.:)

Answer 2

我对Laravel 5.4的以下解决方案也有同样的问题:

找到resources/assets/app.js.

1. 放在Vue.component...之前new Vue(不是之后)
2. 在每个Vue.component人中import,追加.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
);

然后又跑npm run dev了.