单独导入 Vuetify 组件的正确方法是什么？

Question

我是 Vuetify 的新手，我真的很难知道如何仅导入组件来使用它。

我正在使用 Vuetify 2.4.2

正如他们所说的文档，但是 vuetify 导出的路径在哪里？

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

我使用这样的选项卡和元素。我如何为此从 Vuetify 调用组件？

 <v-card>
    <v-tabs show-arrows v-model="tab">
      <v-tabs-slider color="teal"></v-tabs-slider>
      <template v-for="sticker in allStickers">
        <v-tab :key=sticker.id :href="'#tab-'+sticker.id">
          <img :src=sticker.imgurl alt="">
        </v-tab>
      </template>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <template v-for="sticker in allStickers">
        <v-tab-item :key=sticker.id :value="'tab-' + sticker.id">              
          <ul class="liststickers">
            <template v-for="stick in sticker.stickers">
              <li :key=stick.id @click="sendSelectedSticker(stick.id)">
                <img :src=stick.imgurl alt="">
                <p class="stick_price">{{stick.price}}</p>
              </li>
            </template>
          </ul>
        </v-tab-item>
      </template>
    </v-tabs-items>
  </v-card>

感谢您的支持

Answer 1

Vue CLI + Vuetify

如果您使用 Vue CLI 和vue add vuetify，那么此功能已由 vuetify-loader 处理，您无需执行任何操作。来自 Vuetify Treeshaking 文档：

点菜系统使您能够选择要导入的组件，从而大大降低构建尺寸。使用 Vue CLI 插件创建的新项目默认启用此功能。

手动安装

对于手动安装 Vuetify，选择是要全局注册组件还是按组件注册。这两个选项都只会加载您需要的 Vuetify 组件，但全局注册可以让您避免import在每个组件中编写语法。以下是每个设置中使用的示例<v-tabs>。

全球注册

如果您不想将选定的 Vuetify 组件手动导入到使用它们的每个组件中，请使用此选项。

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp,
  VTabs,
  VTab
} from 'vuetify/lib'

Vue.use(Vuetify, {
  components: {
    VApp,
    VTabs,
    VTab
  },
})
const vuetify = new Vuetify({});

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

现在您可以在任何组件中使用<v-app>、<v-tabs>、 和<v-tab>。

每个组件注册

如果您确实想在每个使用 Vuetify 组件的组件中手动注册它们，请使用此选项。

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)
const vuetify = new Vuetify({});

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

应用程序.vue

import { VApp, VTabs, VTab } from 'vuetify/lib'

export default {
  components: {
    VApp,
    VTabs,
    VTab
  }
}