Vue js 无法在 Laravel 5.4 中呈现组件

Question

我是 laravel 和 VUe js 的新手，在全新安装 laravel 5.4 之后，它附带了一个示例 vue 组件，该组件试图在 blade 文件中呈现但失败了

在文件夹 resources/assets/js/components/Example.vue 我有

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

 <script>
   export default {

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

然后我的文件夹resources/assets/js/app.js我有

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

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

然后在 welcome.blade.php 我有

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

上面的组件没有渲染，我也有运行

npm run watch

我哪里错了？

Answer 1

所以对于这个问题的未来访问者来说，问题是 vue.js 没有加载到编写代码的页面上。因此，请始终确保检查是否在需要的地方加载库。

Answer 2

我在这个特定示例中遇到了同样的问题。我发现在 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>

因此，此视图将可以访问所有组件所在的 app.js，现在可以正确呈现，正如 lewis4u

所指出的

Vue js 无法在 Laravel 5.4 中呈现组件

Vue js fails to render the component in Laravel 5.4

laravel-5

vue-component

vuejs2