javascript - 单独导入 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')

应用程序.vue

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

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