Laravel-Vue 组件答案

【问题标题】：Laravel-Vue componentLaravel-Vue 组件
【发布时间】：2021-02-27 15:33:44
【问题描述】：

我正在尝试用标签附加一个 vue 组件

MyComponent.vue

<template>
    <div>
        <h1>Hi</h1>
    </div>
</template>

<script>
export default {

}
</script>

这是 app.js

require('./bootstrap');

window.Vue = require('vue');

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

Vue.component('myComponent', MyComponent);


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

这是我的welcome.blade的主体

<body>
    <div id="app">
        <myComponent></myComponent>
    </div>

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

我得到了这个错误

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

【问题讨论】：

检查 public/js/app.js 文件是否存在，如果没有则运行 npm run watch 命令
谢谢！！！

标签： laravel vue.js components

【解决方案1】：

一般来说，在结束 </body> 标记之前。 Check this link for referance

<body>
  <div id="app">
    <my-component></my-component>
  </div>

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

【讨论】：

【解决方案2】：

试试这个 vuejs 区分大小写

Vue.component('my-component', require('./components/MyComponent.vue').default);

和html

<body>
    <div id="app">
        <my-component></my-component>
    </div>

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

参考链接https://vuejs.org/v2/style-guide/

【讨论】：

@user7385152 import 和我做的一样并编译你的 js