vue3模块里面怎么添加tabs的标签

在Vue3中，你可以使用第三方UI库如Vuetify、Element Plus或者Vue-Bootstrap等来轻松地添加tabs（选项卡）组件。这里以Vuetify为例，因为它是Vue的一个流行选择，并且有现成的Tabs组件。

首先，你需要安装Vuetify：

npm install vuetify
# 或者如果你使用的是yarn
yarn add vuetify

然后，在main.js或single-file component的`<script>`部分引入并注册Vuetify：

import { createApp } from 'vue'
import Vuetify from 'vuetify'
import App from './App.vue'

// 配置Vuetify
const app = createApp(App)
app.use(Vuetify)

// 如果需要国际化支持，可以加上这行
// import { defineMessages, useI18n } from 'vue-i18n'
// const messages = defineMessages()
// app.use(useI18n({
//   locale: navigator.language,
//   messages,
// }))

new Vue(app).mount('#app')

接下来，在模板里使用Vuetify的`v-tabs`和`v-tab-item`组件：

<template>
  <v-app id="app">
    <v-content>
      <v-tabs centered>
        <v-tab @click="activeTab = 0">Tab 1</v-tab>
        <v-tab @click="activeTab = 1">Tab 2</v-tab>
        <!-- 更多tab... -->
      </v-tabs>

      <v-tabs-items v-model="activeTab">
        <v-tab-item tag="div" v-text="tabTitles[activeTab]"></v-tab-item>
        <!-- 内容区域，动态渲染的内容 -->
        <v-container>
          <v-card>内容1</v-card>
        </v-container>
        <v-container v-if="activeTab === 1">
          <v-card>内容2</v-card>
        </v-container>
      </v-tabs-items>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabTitles: ['默认标题', '第二个标题'] // 根据需求动态配置
    }
  },
}
</script>

在这个例子中，`v-model`绑定到`activeTab`变量控制当前激活的标签页，而`v-tabs-items`则会根据`activeTab`值显示相应的tab内容。