單獨導入 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 文檔：

A la carte 系統使您能夠挑選和選擇要導入的組件，從而大大降低您的構建尺寸。 使用 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
  }
}