Vue JS 组件未显示在 index.blade Laravel 项目上

Question

我的 vue js 组件没有显示在我的项目中。 我没有看到任何错误，因为我之前看过很多例子，这是实现它的正确逻辑。 谁能帮我？

index.blade.php 文件

<div id="app">
<div class="d-flex align-items-center pb-3">
     <div class="h3">{{ $user->username}}</div>

     <follow-button></follow-button>
</div>
</div>

跟随按钮.vue 文件

<template>
    <div>
        <button class="btn btn-primary ml-4"> Follow Me </button>
    </div>
</template>

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

app.js 文件

require('./bootstrap');

window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('follow-button', require('./components/FollowButton.vue').default);

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

ExampleComponent.vue 文件

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

Answer 1

确保你使用<div id="app">里面写了所有的 vuejs 代码

在 app.js 中添加这个

Vue.component('follow-button', require('./components/FollowButton.vue').default);

注册follow-button您可以使用

<div id="app">
    <div class="d-flex align-items-center pb-3">
        <div class="h3">{{ $user->username}}</div>
        <follow-button> </follow-button>
    </div>
</div>

之后运行npm run dev

注意： - 确保index.blade.php在这里你添加了app.js文件

Answer 2

对于任何可能和我有同样问题的人来说，不知何故我有两个具有相同 id="app" 的 div，这确保了我的 vue.js 文件不会在我的 laravel 项目中实现。

Answer 3

尝试添加到 index.blade.php 文件

<script src="{{ mix('/js/app.js') }}"></script>