Vuetify 구성 요소를 개별적으로 가져 오는 올바른 방법은 무엇입니까?

debugcn 에 게시 Dev

하이 티엔

저는 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>

당신의 지원에 감사드립니다

과

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

앱보기

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

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사