Vuejs组件未与laravel注册

Question

我知道这个问题被问了好几次，但我找不到解决问题的办法。

我的laravel项目有两个vue组件。第一个是名为"ExampleComponent.vue“的laravel默认组件，第二个是我自己的名为"multi.vue”的新组件。

我在section.blade.php文件中使用它们，如下所示：

@extends('layouts.app')

@section('content')
<example-component></example-component>

<multi></multi>

@endsection

但是只有“示例组件”才能工作，对于“多”组件，它给出了以下错误：

未知自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。

以下是我的app.js代码：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('multi', require('./components/multi.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>

我的multi.vue：

<template>
  <div>
      I am multi component!
  </div>
</template>

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

<style>

</style>

路线是：

Route::get('/section',function(){
    return view('section');
});

Answer 1

为了解决这个问题，你所需要做的就是运行“运行npm监视”。

运行该命令后，每当您对代码进行更改并保存它时，它将重新编译您的vue代码。

将其保存在一个单独的终端中，并在另一个终端中运行"php artisan serve“。

Answer 2

来自https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential

组件名称应该始终是多字的，除了根应用程序组件，以及Vue提供的内置组件，如<transition>或<component>。

这可以防止与现有的和未来的HTML元素发生冲突，因为所有的HTML元素都是一个单词。