Vuetable-2 无法安装在 Laravel 6

Question

我正在尝试在 Laravel 6 中使用 Vue 组件 Vuetable-2。我知道该组件说它是为 5.4 制作的，但我相信它应该仍然有效。

我的 app.js 看起来像这样：

    require('./bootstrap');

    window.Vue = require('vue');

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

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

控制台显示组件无法挂载。

[Vue warn]: Failed to mount component: template or render function not defined.

found in
---> <MyVuetable>
       <Root>

view 我尝试安装组件的位置如下：

（请注意示例组件确实正确安装）

@extends('layouts.app', ['activePage' => 'integracion', 'titlePage' => __('Integracion')])

    @section('content')
      <div class="content" id="app">
        <div class="container-fluid container">
          <example-component></example-component>
          <my-vuetable></my-vuetable>     
        </div>
      </div>
    @endsection

    @push('js')
      <script>
        $(document).ready(function() {

        });
      </script>
    @endpush

Answer 1

你需要require('path').default。 .default 在这里是必需的，因为当您使用 require('path') 时，您只是得到一个 JSON 对象：

{ default: <VueConstructor> }

所以在该对象中没有定义模板或渲染函数。但是，如果您使用 .default 那么在这种情况下您实际上会得到一个 SFC，它可以被向下编译。

另一种方法是使用 import:

import MyVuetable from './components/MyVuetable.vue'
Vue.component('my-vuetable', MyVuetable)

或者，启用 syntax-dynamic-import：

Vue.component('my-vuetable', () => import('./components/MyVuetable.vue'))

Vuetable-2 无法安装在 Laravel 6

Vuetable-2 cannot be mounted in Laravel 6

datatable

laravel

vue.js

laravel-6