使用 Laravel 的未知自定义元素 Vue答案

【问题标题】：Unknown custom element Vue with Laravel使用 Laravel 的未知自定义元素 Vue
【发布时间】：2019-02-03 03:14:46
【问题描述】：

我在新项目中不断出现以下控制台错误：

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

但我像其他所有组件一样注册，但它在新项目中不起作用。

这是 app.js：

require('./bootstrap');
window.Vue = require('vue');
Vue.component('login-component', require('./components/LoginComponent.vue'));
const app = new Vue({
    el: '#app',
});

这是 Laravel 的默认 Vue。

LoginCompontent 如下所示：

<template>
    <form class="default-form">
        <h1>Login</h1>
    </form>
</template>

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

但是我做错了什么，它无法识别它？

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

试试这个，因为我看不到你在哪里安装你的“应用程序”

import LoginComponent from './components/LoginComponent';

const app = new Vue({
    el: '#app',
    render: h => h(LoginComponent)
});

我通常会这样做：

import LoginApp from './components/LoginApp.vue';

const app = new Vue({
    el: '#app',
    render: h => h(LoginApp)
});

然后在 LoginApp.vue 我会做这样的事情：

<template>
   <div>
      <login-component></login-component>
   </div>
</template>

Vue.component('LoginComponent', require('.components/LoginComponent'));
<script>
    export default {
        mounted() {
            console.log('Login Component mounted.');
        },
    }
</script>

【讨论】：