如何在 laravel Blade 中使用 vue.js 组件？答案

【问题标题】：How to use vue.js component in laravel blade?如何在 laravel Blade 中使用 vue.js 组件？
【发布时间】：2018-02-14 16:09:09
【问题描述】：

我像这样在 app.js 中注册了组件：

Vue.component('navbar', require('./components/Navbar.vue'));

现在我想导入那个组件：

<template>
<nav class="navbar">CODE HERE</nav>
</template>

进入我的blade.php文件：

<body class="">
    <div id="app">
        <div class="">
        <navbar></navbar> <-- here!
        @yield('content')
        </div>
    </div>
</body>

最简单的方法是什么？

【问题讨论】：

尝试从这个答案stackoverflow.com/a/43224985/7844349获得帮助

标签： javascript php laravel vue.js

【解决方案1】：

在 app.js

中

import navbar from './components/Navbar.vue';
Vue.component('navbar', require('./components/Navbar.vue'));

var app = new Vue({
   el: '#app',
   components: {
       'navbar': require('./components/Navbar.vue'),
   }
});

在你的刀片中：

<body class="">
<div id="app">
    <div class="">
       <navbar></navbar>
       @yield('content')
    </div>
</div>

【讨论】：

未知自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
在Vue.component 语句之前使用import navbar from './components/Navbar.vue';
你在 app.js 中使用过export default { } 吗？？
你是什么意思？
现在这里出现错误 'navbar': require('./components/Navbar.vue');

【解决方案2】：

这是一个旧线程，但是：不要忘记运行 npm run dev 来编译 app.js

【讨论】：