Laravel 5 Vue js无法在Laravel 5.4中渲染组件_Laravel 5_Vuejs2_Vue Component

Laravel 5 Vue js无法在Laravel 5.4中渲染组件

laravel-5 vuejs2

Laravel 5 Vue js无法在Laravel 5.4中渲染组件,laravel-5,vuejs2,vue-component,Laravel 5,Vuejs2,Vue Component,我是laravel和VUe js的新手，在全新安装了laravel 5.4之后，它附带了一个示例VUe组件，我正在尝试在刀片文件中渲染，但失败了在文件夹resources/assets/js/components/Example.vue中，我有 <template> <div class="container"> Testing component </div> </template> <script>

我是laravel和VUe js的新手，在全新安装了laravel 5.4之后，它附带了一个示例VUe组件，我正在尝试在刀片文件中渲染，但失败了

在文件夹

resources/assets/js/components/Example.vue

中，我有

<template>
  <div class="container">
      Testing component
   </div>
</template>

 <script>
   export default {

    mounted() {
        console.log('Component mounted.')
    }
   }
 </script>

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

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

然后在welcome.blade.php中

<div id="app">
   <example></example>
 </div>

我哪里出错了？

因此，对于这个问题的未来访问者来说，问题在于编写代码的页面上没有加载vue.js。因此，务必确保您检查是否正在加载库，以满足您的需要。

我在这个特定示例中遇到了同样的问题。我发现VueJS需要的默认welcome.blade.php文件中没有VueJS库。因此，我所做的是：

在文件welcome.blade.php中添加粗体行：

<body>
    **<div id="app">**
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>
                        <a href="{{ route('register') }}">Register</a>
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    SAGACE
                </div>
                <example></example>
        </div>
    **</div>**
    <!-- Scripts -->
    **<script src="{{ asset('js/app.js') }}"></script>**
</body>


****
@if（Route:：has（'login'））
@认证
@否则
@endauth
@恩迪夫
萨盖斯
****
****

因此，此视图可以访问app.js，其中所有组件都可以正确呈现，正如

所指出的那样，这是stackoverflow中的一个打字错误，但在代码中，代码本身工作正常。尝试不需要组件，但要像这样导入：

从“/…/Example.vue”导入示例

并将组件声明为

vue.component（'Example'，Example）

如果您使用的是chrome浏览器，那么您可以安装chrome扩展vue.js devtools来查找问题。感谢wostex我发现原因是因为在使用默认的welcome.blade.php时，它不包括包含编译后的app.js文件的布局文件，在运行make:auth之后，它现在可以工作了

<body>
    **<div id="app">**
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>
                        <a href="{{ route('register') }}">Register</a>
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    SAGACE
                </div>
                <example></example>
        </div>
    **</div>**
    <!-- Scripts -->
    **<script src="{{ asset('js/app.js') }}"></script>**
</body>