Laravel Vue 组件未显示

Question

我受困于这段代码。我无法让它工作，而且我没有收到任何错误。这可能意味着我需要额外的依赖？它根本不显示。请帮我。谢谢

app.js - 文件

Vue.component('message', require('./components/Message.vue'));

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

Message.vue - 文件

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Message</div>
                    <div class="panel-body">
                        I'm the component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ready () {
            console.log('Component ready')
        }
    }
</script>

home.blade.php - 文件

@extends('templates.default')

@section('content')
    <h3>Welcome to Site</h3>
    <div class="container">
        <div id="app">
            <message></message>
        </div>
    </div>
@stop

Answer 1

您在使用前端时可能还需要清除浏览器缓存。在 mac 这是 command + shift + R。还要确保你做了运行 gulp 来编译你的 js 文件。

还要确保在 </body>:

之前将已编译的 js 文件包含到布局模板中

<script src="/js/app.js"></script>

Answer 2

我认为您缺少行中的 .default

Vue.component('message', require('./components/Message.vue').default);

Laravel Vue 组件未显示

Laravel Vue Component not being shown

components

show

laravel

vuejs2