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组件的下方或之后导入组件，但在创建绑定到DOM的新Vue对象之前。

不要忘记同时运行gulp。：）

Answer 2

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

查找resources/assets/app.js。

将所有Vue.component...放在new Vue之前（而不是之后）
在每个Vue.component的{{1}}中，附加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 );。

Answer 3

我遇到了同样的问题，结果证明这很重要：把代码

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

在app.js文件的END。

开始在网页上显示组件。

Answer 4

塔伦是正确的：

请确保您之前在app.js中包含 vue 引用：

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

Answer 5

我已经解决了这个问题，我们不需要包含任何Vue库，laravel默认提供这个（这是laravel 5.4和＆gt;）：

转到您的项目文件夹/ public / js / app.js

找到您的护照客户，护照授权客户和护照 - 个人访问令牌注册的代码。

将代码替换为：

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

注意：在“Var app = new Vue”之前注册Vue.component

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

5 个答案: