Question

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

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

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

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

我一直在环顾四周，发现在vue中引用此错误的大多数地方都是由于vue组件没有被包装在div中，而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

我通过一个简单的路由关闭来调用它。

Web.php

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

Laravel护照vue组件显示为片段

0 个答案: