1

我在我现有的 Laravel 5.3 项目中重新安装了 Laravel 护照。

编辑：我现在意识到，如果我尝试导入任何 Vue 组件（甚至是默认示例组件），它们都会显示为片段。

我正在尝试将 Vue 组件导入我的应用程序，但是当我这样做时，chrome 中的 Vue 调试工具告诉我元素是片段。

查看页面的来源，它没有提到它们，所以我猜测组件正在正确注册到页面中

我一直在环顾四周，发现在 vue 中引用此错误的大多数地方都是由于 vue 组件没有被包装在一个植根于页面中的元素的 div 中，但是相同的组件在全新安装中起作用。

我应该寻找什么来找到这个问题？

这是我的主布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @include('includes.title')

    <!--Baked in styles -->
    @include('includes.styles')

    <!-- Theme Custom styles -->
    <link href="{{ asset('/css/custom.css') }}" rel="stylesheet">

    {{--Fonts and icons--}}


    <!-- Scripts -->
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
    @yield('css')

</head>
<body>
    @include('includes.navbar')
    @yield('content')

    <!-- Scripts -->


    {{--Core ecomplete JS--}}
    <script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

    <script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery-ui.custom.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/bootstrap.js') }}"></script>
    {{--End core ecomplete JS--}}

    <script type="text/javascript" src="{{ asset('js/sweetalert.min.js') }}"></script>

    @yield('js')

    <!--  Plugins -->
    <script src="{{ asset('js/gsdk-checkbox.js') }}"></script>
    <script src="{{ asset('js/bootstrap-select.js') }}"></script>
    <!--  End Plugins -->

    <!--  GSDK JS -->
    <script src="{{ asset('js/get-shit-done.js') }}"></script>





    @include('sweet::alert')
</body>
</html>

这是我的 app.js 的代码

Vue.component('example', require('./components/Example.vue'));

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

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

这是我的 api.blade.php 的代码

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <passport-clients></passport-clients>
                <passport-authorized-clients></passport-authorized-clients>
                <passport-personal-access-tokens></passport-personal-access-tokens>
            </div>
        </div>
    </div>

@endsection

我从一个简单的路线关闭中调用它。

网页.php

Route::get('api', function(){
    return view('api');
});
4

0 回答 0