Vuejs2 为什么使用vuetable-2组件时出现未知自定义元素错误？

在@vue/cli 4.0.5应用程序中添加我得到的组件 控制台中的错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <vuetable-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

vue.runtime.esm.js？2b0e:619[vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项。

我的vue文件是：

<template>
    <div class="test" style="width: 100% !important;">
        <h1>This is a test page</h1>


        <div class="ui container">
            <vuetable ref="vuetable"
                      api-url="https://vuetable.ratiw.net/api/users"
                      :fields="fields"
                      pagination-path=""
                      @vuetable:pagination-data="onPaginationData"
            >
            </vuetable>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
            ></vuetable-pagination>
        </div>



    </div>
</template>

<script>
    import Vue from 'vue'

    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";


    Vue.use(Vuetable);

    export default {
        components: {
            'vuetable-pagination': Vuetable.VuetablePagination,
            Vuetable,
            VuetablePagination,
        },

        data() {
            return {
                fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'],
            }
        }, // data () {


        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },

        }, // methods: {

    }
</script>

这是一个测试页面
从“Vue”导入Vue
从“Vuetable-2/src/components/Vuetable”导入Vuetable
从“vuetable-2/src/components/VuetablePagination”导入VuetablePagination；
Vue.use（Vuetable）；
导出默认值{
组成部分：{
“vuetable分页”：vuetable.vuetable分页，
Vuetable，
VuetablePagination，
},
数据（）{
返回{
字段：[“姓名”、“电子邮件”、“生日”、“昵称”、“性别”、“插槽：操作”]，
}
}，//数据（）{
方法：{
onPaginationData（paginationData）{
此.$refs.pagination.setPaginationData（paginationData）
},
}，//方法：{
}

我想我在页面的导入和组件部分中添加了VuetablePagination，但是 看起来有点不对劲

使用此组件的有效方法是什么

谢谢！

你可以试试这个

添加引导

npm install bootstrap --save

Main.js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

您的组件vue

<template>
    <div class="app" style="width: 100% !important;">
        <h1>This is a test page</h1>


        <div class="ui container">
            <vuetable ref="vuetable"
                      api-url="https://vuetable.ratiw.net/api/users"
                      :css="css.table"
                      :fields="fields"
                      pagination-path=""
                      @vuetable:pagination-data="onPaginationData"
            >
            </vuetable>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
                                 :css="css.pagination"
            ></vuetable-pagination>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'

    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";


    Vue.use(Vuetable);

    export default {
        components: {
            Vuetable,
            VuetablePagination,
        },

        data() {
            return {
                fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'],
                css: {
                    table: {
                        tableClass: 'table table-striped table-bordered table-hovered',
                        loadingClass: 'loading',
                        ascendingIcon: 'glyphicon glyphicon-chevron-up',
                        descendingIcon: 'glyphicon glyphicon-chevron-down',
                        handleIcon: 'glyphicon glyphicon-menu-hamburger',
                    },
                    pagination: {
                        infoClass: 'pull-left',
                        wrapperClass: 'vuetable-pagination pull-right',
                        activeClass: 'btn-primary',
                        disabledClass: 'disabled',
                        pageClass: 'btn btn-border',
                        linkClass: 'btn btn-border',
                        icons: {
                        first: '',
                        prev: '',
                        next: '',
                        last: '',
                        },
                    }
                }
            }
        }, // data () {


        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            }

        }, // methods: {

    }
</script>

这是一个测试页面
从“Vue”导入Vue
从“Vuetable-2/src/components/Vuetable”导入Vuetable
从“vuetable-2/src/components/VuetablePagination”导入VuetablePagination；
Vue.use（Vuetable）；
导出默认值{
组成部分：{
Vuetable，
VuetablePagination，
},
数据（）{
返回{
字段：[“姓名”、“电子邮件”、“生日”、“昵称”、“性别”、“插槽：操作”]，
css:{
表:{
tableClass:“表条带边框的表悬停”，
loadingClass:“正在加载”，
ascendingIcon:'字形图标字形图标字形图标向上'，
下降图标：“字形图标字形图标向下”，
handleIcon:“图标菜单汉堡”，
},
分页：{
信息类：“向左拉”，
wrapperClass:“vuetable分页向右拉”，
activeClass:'btn primary'，
disabledClass:“disabled”，
pageClass:'btn btn border'，
链接类：“btn边界”，
图标：{
首先:",，
上一页：''，
下一步：''，
最后:''，
},
}
}
}
}，//数据（）{
方法：{
onPaginationData（paginationData）{
此.$refs.pagination.setPaginationData（paginationData）
},
onChangePage（第页）{
此.$refs.vuetable.changePage（第页）
}
}，//方法：{
}

这是bootstrap（不是bootstrap vue）应用程序。实际上，在文档页面中，我没有看到bootstrap/bootstrap vue的任何必需参考，我看到了以下示例：看起来像myne，不明白为什么它不适合我我我有：“axios”：“^0.19.0”、“core js”：“^3.3.2”、“vue”：“^2.6.10”…“bootstrap”：“^4.3.1”、“faker”：“^4.1.0”，“jquery”：“^3.4.1”，“vuetable-2”：“^1.7.5”？vuetable试图与CSS框架无关，但在您的示例设置中，它引用Bootstrap3，您不需要使用BootStrapVue。错误在组件部分，应该是这样的：组件：{vuetable，VuetablePagination}。我更新了我的答案，这个示例可以帮助您