单独导入 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 docs:

The A la carte system enables you to pick and choose which components to import, drastically lowering your build size. New projects created with the Vue CLI plugin have this enabled by default.

手动安装

对于 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')

App.vue

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

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