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