Vuejs无法挂载组件：未定义模板或渲染函数答案

【问题标题】：Vuejs Failed to mount component: template or render function not definedVuejs无法挂载组件：未定义模板或渲染函数
【发布时间】：2018-07-16 21:54:06
【问题描述】：

我是 VueJs 的新手，所以请记住这一点。

我有一个这样的模板组件

 <template>
    <div class="testing-container">
        <button v-on:click="toggleContainer" class="btn btn-success btn-sm show-testing-container">Testing <i v-if="!show" class="fa fa-chevron-up"></i><i v-if="show" class="fa fa-chevron-down"></i></button>
        <div v-if="show" class="testing-frame">
            <vue-tabs active-tab-color="#e74c3c"
                      active-text-color="white"
                      type="pills"
                      :start-index="1"
                      direction="vertical"
            >
                <v-tab title="First tab" icon="ti-user">
                    First Tab
                </v-tab>

                <v-tab title="Second tab" icon="ti-settings">
                    Second tab content
                </v-tab>

                <v-tab title="Third tab" icon="ti-check">
                    Third tab content
                </v-tab>
            </vue-tabs>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false,
            };
        },
        created() {
        },
        methods: {
            toggleContainer() {
                if(this.show){
                    this.show = false;
                }else{
                    this.show = true;
                }
            },
        }
    }
</script>

我正在尝试加载另一个名为 vue-tabs 的组件，但我不断收到

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <VueTabs>

这是我的构造函数：

/**
 * Import Vue Tabs
 */
import VueTabs from "vue-nav-tabs"
/**
 * Vue Nav Tabs
 */
Vue.component('vue-tabs', VueTabs)
/**
 * Units Testing Component
 */
Vue.component('unit-testing',
    require('./components/testing/UnitTesting.vue')
);

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

Gulp Watch 没有抛出任何未找到错误，所以我真的很困惑这里发生了什么。感谢您提前提供的帮助。

【问题讨论】：

您的构建设置是什么？您是否正在流经vue-loader 或gulp-vueify 之类的东西？ vue 文件是一种方便的格式。必须先对其进行转换才能导入。
我不确定这是否是同一件事，但我正在使用 gulp 构建它，并且从我发现它使用 laravel elixir 到 webpack app.js
你试过import { VueTabs } from "vue-nav-tabs"吗？
@sklingler93 ，这完成了工作，你能告诉我有什么区别吗，考虑到其他例子没有括号？
示例确实使用括号进行本地注册：vuejs.creative-tim.com/vue-tabs/#/?id=component-registration

标签： javascript vuejs2 vue-component

【解决方案1】：

使用es6 imports：

import VueTabs from "vue-nav-tabs"

将从模块导入默认导出为VueTabs（在这种情况下是一个 vue 插件，而不是您尝试使用的组件）。

同时：

import { VueTabs } from "vue-nav-tabs"

将从模块中导入VueTabs 导出。

【讨论】：