Vue 组件未显示 - Passport 实现 Laravel 5.4

Posted 2023-02-22

【中文标题】Vue 组件未显示 - Passport 实现 Laravel 5.4

【英文标题】：Vue Component not showing - Passport Implemenation Laravel 5.4

【发布时间】：2017-09-10 09:06:31

【问题描述】：

我正在尝试使用 Laravel 5.4 实施护照，并且我已逐步遵循官方文档。一切似乎都按照说明正常工作，直到我点击 “前端快速入门”

按照指示，我使用

发布了供应商

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。

我已经为此苦苦挣扎了一段时间，正在寻找社区专家选项来帮助解决这个问题。

谢谢你。

【问题讨论】：

DOM 中的#app 在哪里？浏览器控制台也说什么吗？

#app 在我的@extends('layouts.app') 中。我试图在它似乎正在工作的同一页面中呈现 example.vue..

【参考方案1】：

在你的 dom 中，你的组件必须有一个 id 为“app”的父级，因为你在 app.js 中声明了它：

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

【讨论】：

#app 在我的@extends('layouts.app') 中。我试图在它似乎正在工作的同一页面中呈现 example.vue..

你运行php artisan make:auth 命令了吗？在您的 layouts/app.blade.php 中，您是否得到以下代码：<script> window.Laravel = !! json_encode([ 'csrfToken' => csrf_token(), ]) !!; </script>？

两个问题都是。

就像之前有人问的那样，浏览器控制台会说什么吗？

【参考方案2】：

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

来自official document

要使用 Passport Vue 组件，您必须使用 Vue JavaScript 框架。这些组件也使用 Bootstrap CSS 框架。但是，即使您不使用这些工具， 组件为您自己的前端提供有价值的参考 实施。

Download vuejs here

希望有帮助