Vue单文件组件异常：新手使用vue-tabs-component遇运行问题

Hey there! Let's figure out why your vue-tabs-component isn't working as expected. From the code snippet you shared, there are a few common issues that might be tripping you up—let's go through them step by step:

1. First, ensure you've installed the package #

It's easy to forget this step when you're starting out! Run one of these commands in your project directory to install the component:

npm install vue-tabs-component --save
# OR
yarn add vue-tabs-component

2. Don't skip the component styles #

This component requires its own CSS to render tabs properly. If you don't import the styles, the tabs might not look or behave like you expect.

3. Fix component registration #

Your script snippet cuts off, but it looks like you might be mixing global registration in a single-file component. Here are two solid approaches:

Option A: Global Registration (in main.js)

Register the components once globally so you can use them anywhere in your app:

import Vue from 'vue'
import App from './App.vue'
import { Tabs, Tab } from 'vue-tabs-component'
import 'vue-tabs-component/docs/resources/tabs.css' // Import styles here

Vue.component('tabs', Tabs)
Vue.component('tab', Tab)

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

Option B: Local Registration (directly in App.vue)

If you only need the tabs in this component, register them locally instead:

<template>
  <div>
    <tabs>
      <tab name="First tab">
        First tab content
      </tab>
      <tab name="Second tab">
        Second tab content
      </tab>
      <tab name="Third tab">
        Third tab content
      </tab>
    </tabs>
  </div>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'
import 'vue-tabs-component/docs/resources/tabs.css' // Don't forget styles!

export default {
  components: {
    Tabs,
    Tab
  }
}
</script>

Quick check #

After making these changes, restart your Vue CLI dev server (npm run serve or yarn serve) to ensure all imports are picked up. The tabs should now render properly, with clickable tabs switching between content sections.

内容的提问来源于stack exchange，提问作者pzjzeason