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

【问题标题】：Vue js fails to render the component in Laravel 5.4Vue js 无法在 Laravel 5.4 中渲染组件
【发布时间】：2017-10-24 16:48:56
【问题描述】：

我是 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

我哪里错了？

【问题讨论】：

<div id="app" - 用>关闭它
这是 stackoverflow 中的拼写错误，但在代码中它已关闭
jsfiddle.net/wostex/63t082p2/65 代码本身工作正常。尝试不需要组件，但 import 像这样：import Example from './.../Example.vue' 并将组件声明为 Vue.component('example', Example)
如果您使用的是 chrome 浏览器，那么您可以安装 chrome 扩展程序 Vue.js devtools 来找出问题所在。 chrome.google.com/webstore/detail/vuejs-devtools/…
感谢 wostex 我发现原因是因为当使用默认的welcome.blade.php 时，它不包含包含已编译app.js 文件的布局文件，运行make:auth 现在它可以工作了

标签： laravel-5 vuejs2 vue-component

【解决方案1】：

所以对于这个问题的未来访问者来说，问题是 vue.js 没有加载到编写代码的页面上。因此，请务必检查是否将库加载到需要它们的位置。

【讨论】：

【解决方案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，并且现在可以正确呈现。

【讨论】：