Question

我正在尝试使用Laravel 5.4实施护照，我一步一步地遵循官方文档。根据说明，一切似乎都正常工作，直到我点击＆＃34; Frontend Quickstart＆＃34;

按照指示，我使用

发布了供应商

php artisan vendor:publish --tag=passport-components

这给了我预期的组件。之后我在app.js中注册了我的组件

app.js

/**
 * Add the CSRF Token to the Laravel object. The Laravel object is being 
 * used by Axios and the reference can be seen in ./bootstrap.js
 * 
 * Requires the token be set as a meta tag as described in the documentation:
 * https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token
 */

window.Laravel = { csrfToken: document.head.querySelector("[name=csrf-token]").content }

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * The Vue components for managing the OAuth setup
 */

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

/**
 * Instantiate Vue for use 
 */

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

我安装了依赖项并构建了组件

npm install 
npm run dev

将组件放在我的home.blade.php（测试目的）

中

@extends('layouts.app')

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

                <div class="panel-body">
                    <passport-clients></passport-clients>
                    <passport-authorized-clients></passport-authorized-clients>
                    <passport-personal-access-tokens></passport-personal-access-tokens>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

但视图中没有任何内容。我尝试在这个主题中搜索了很多但是所有的解决方案似乎都指向了gulp配置。但Laravel 5.4不再使用gulp它使用webmix。

我一直在努力解决这个问题，寻找社区专家的选择来帮助我们解决这个问题。

感谢你。

Answer 1

在你的dom中，你的组件必须有一个id为＆＃34; app＆＃34;因为你在app.js中声明了它：

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

Answer 2

确保您已在<script src="{{ asset('js/vue.min.js')}}"></script>文件中添加layouts.app。

来自http://xxxxxxxxx/plugin-configuration.xml

要使用Passport Vue组件，您必须使用Vue JavaScript框架。这些组件也使用Bootstrap CSS 框架。但是，即使您不使用这些工具，也可以组件可作为您自己前端的宝贵参考实施

official document

希望这个帮助

Vue组件未显示 - Passport Implemenation Laravel 5.4

2 个答案: