VueJs 组件未显示在 laravel 刀片上答案

【问题标题】：VueJs component doesnt show on a laravel bladeVueJs 组件未显示在 laravel 刀片上
【发布时间】：2018-12-12 00:37:28
【问题描述】：

我正在尝试显示 assets/js/components/LoginComponent.vue 中的 vue 组件，它看起来像这样

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

而app.js是这样的

require('./bootstrap');

window.Vue = require('vue');
Vue.component('login-component', require('./components/LoginComponent.vue'));

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

并且试图导入我的 vuejs 组件的刀片是这样的

<body>
<div id="app">


        <login-component></login-component>


        @yield('content')

</div>
</body>

它显示所有页面而没有组件知道如何解决它？

【问题讨论】：

有错误提示吗？
不要忘记 npm run watch 来实际构建组件
@BennettDams 不，这是我得到的imguh.com/image/8o6zy
@KhalidBakry 您是否在应用组件中包含components: {login-component}？
@BennettDams 你的意思是这一行 Vue.component('login-component', require('./components/LoginComponent.vue')); ?

标签： javascript laravel vue.js

【解决方案1】：

这些解决了窍门

https://laravel.com/docs/5.6/frontend

https://laravel.com/docs/5.6/mix

安装这些，ctrl+s会重新编译所有的js并会找到它

【讨论】：

【解决方案2】：

使用 npm run watch 或 npm run dev 编译 Vue 文件。
检查您是否拥有刀片文件中已编译资产的链接：

<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}"> @if (app()->isLocal()) <script src="{{ asset('js/app.js') }}"></script> @else <script src="{{ mix('js/manifest.js') }}"></script> <script src="{{ mix('js/vendor.js') }}"></script> <script src="{{ mix('js/app.js') }}"></script> @endif
请检查它们是否在网络选项卡中正确加载，
还要让#app div 只包装登录组件

<div id="app"> <login-component></login-component> </div> @yield('content')

【讨论】：

【解决方案3】：

在 app.js

中

Vue.component('login-component', require('./components/LoginComponent.vue').default);

需要安装
npm install --save axios vue-axios

app.js的上层需要声明

import VueAxios from 'vue-axios';
import axios from 'axios';

require('./bootstrap');

window.Vue = require('vue');
Vue.use(VueAxios, axios);

希望有效果

【讨论】：