Я новичок в 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 не бросает ничего Не найдено Ошибки, поэтому я действительно смущен тем, что здесь происходит. Я ценю за помощь заранее.
Использование импорта es6:
import VueTabs from "vue-nav-tabs"
будет импортировать экспорт по умолчанию из модуля в виде VueTabs
(который в этом случае является vue-плагином, а не компонентом, который вы пытаетесь использовать).
В то время как:
import { VueTabs } from "vue-nav-tabs"
будет импортировать экспорт VueTabs
из модуля.
vue-loader
илиgulp-vueify
? Файл VUE - это удобный формат. Это должно быть преобразовано прежде, чем это может быть импортировано.