如何在刀片模板laravel中使用单个文件vue组件？

Question

我有一个简单的表格组件。

<template>
<div>
    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th v-for="column in headers">{{column}}</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(row, index) in data">
            <td>{{index + 1}}</td>
            <td v-for="column in row">{{column}}</td>
        </tr>
        </tbody>
    </table>
</div>
</template>
<script>
    export default {
        name: "simple-table",
        props: ['headers', 'data']
    }
</script>

<style scoped>

</style>

我想在我的laravel刀片模板文件中使用它。 对于全球注册，我尝试过：

import Vue from 'vue'


window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');  

Vue.component('simple-table', require('./components/SimpleTable'));

在我的刀片模板中：

<div id="people">
     <simple-table :data="tableData" :headers="columns">
     </simple-table>
</div>
........

 <script>

    const url = "{{url(sprintf("/api/admin/employees/%s/salary-history", $employee->id))}}";


    new Vue({
        el: "#people",            
        data: {
            columns: ['id', 'name', 'age'],
            tableData: [
                { id: 1, name: "John", age: "20" },
                { id: 2, name: "Jane", age: "24" },
                { id: 3, name: "Susan", age: "16" },                 
            ]                
        }
    });




</script>

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

为了在本地注册组件，我使用了以下方法：

//app.js
import SimpleTable from './components/SimpleTable'
window.SimpleTable = SimpleTable

然后在我尝试使用的刀片模板中注册

....
components: {
   'simple-table': window.SimpleTable
}

但是我仍然遇到同样的错误。 如果我控制台日志window.SimpleTable它显示为未定义

我正在使用默认配置的laravel mix。 我究竟做错了什么？

Answer 1

您是否运行过npm run dev来编译javascript文件？

（刀片中的任何内容都会自动执行，但./resources/assets/js任何内容都不会自动./resources/assets/js ）