Question

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>

然后我的文件夹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>

因此，lewis4u

指出，这个视图可以访问app.js，其中所有组件都可以正常呈现。

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

2 个答案: