Vue组件未在laravel 5.3中使用护照显示答案

【问题标题】：Vue Components not showing up using passport in laravel 5.3Vue组件未在laravel 5.3中使用护照显示
【发布时间】：2017-01-09 23:27:39
【问题描述】：

从标题中可以看出，我正在试用 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 还很陌生

【问题讨论】：

你的 app.js 文件中的组件导入了吗？
是的，我确实已经导入了
没错
Here 是导入的代码。我实际上忘记了运行 gulp （抱歉来晚了）。但是现在我知道它至少在控制台中出现了一些错误。 vue.common.js?4a36:1019 [Vue 警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。然后其他两个组件也一样。
是的，我已经发布了组件，here 是向您展示我如何导入组件的整个文件。我尝试取出示例组件，然后控制台中没有出现其他标签的错误，但它们仍然没有加载。

标签： php laravel vue.js

【解决方案1】：

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

别忘了也运行gulp。 :)

【讨论】：

【解决方案2】：

我在 Laravel 5.4 的以下解决方案中遇到了同样的问题：

找到resources/assets/app.js。

将所有Vue.component... 放在new Vue 之前（不是之后）
在每个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。

【讨论】：

使用 laravel 5.6，第一个解决方案对我有用！谢谢！

【解决方案3】：

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

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

在 app.js 文件的末尾。

这开始在网页上显示组件。

【讨论】：

与上述答案类似

【解决方案4】：

塔伦是正确的：

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

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

【讨论】：

刷新时也可以尝试 Ctrl / Cmd + F5 清除浏览器缓存。

【解决方案5】：

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

转到您的项目文件夹/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

【讨论】：