vue 3.0+vite 2 동적 비동기 구성 요소 게 으 름 로드 실현

2103 단어 vuevite2동적 비동기게으르다
vite 프로젝트 만 들 기
성능 이 성 패 를 결정 한다.vite 가 확실히 빠르다;
cmd 명령 행(기본적으로 node&npm 가 설치 되 어 있 습 니 다),npm init@vitejs/app vue-study C--template vue 를 실행 합 니 다.
cd 에서 vue-study,npm install(설치 의존);npm run dev(시작 항목);
구성 요소 만 들 기
새 디 렉 터 리 는 pages 이 고 pages 아래 디 렉 터 리 contents 를 새로 만 듭 니 다.contens 아래 에 구체 적 인 구성 요소 디 렉 터 리 페이지 를 새로 만 들 수 있 습 니 다.이 디 렉 터 리 구 조 는 다음 과 같 습 니 다.

App.vue

<template>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">  </p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">    </p>
 <p>{{currentTabComponent}}</p>
 <!-- <Suspense> -->
 <component :is="DefineAsyncComponent({
     //     
     loader: Modeuls[currentTabComponent],
     // //    ：Infinity（     ，   ms）
     timeout: 3000,
    })"></component>
 <!-- </Suspense> -->
</template>
<script lang="ts">
 import {
  defineComponent,
  defineAsyncComponent,
  reactive,
  ref
 } from 'vue'
 export default defineComponent({
  name: 'App',
  setup() {
   //vite           
   const Modeuls = import.meta.glob('./pages/contents/*/*');
   const onChangeContents = function(URL) {
    currentTabComponent.value = URL;
    console.log(currentTabComponent)
   }
   let currentTabComponent = ref('./pages/contents/systemManges/xtcs.vue');
   const DefineAsyncComponent = defineAsyncComponent;
   return {
    DefineAsyncComponent,
    currentTabComponent,
    onChangeContents,
    Modeuls
   }
  },
 })
</script>
vue 3.0+vite 2 동적 비동기 구성 요소 게 으 름 마 운 트 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue 3.0+vite 2 동적 비동기 게 으 름 마 운 트 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!
MySQL 설치 및 MySQL 8.0 새 암호 인증 방식 자세히 알 아 보기
MySQL 8.0 이 지나 간 구덩이 에 대해 자세히 알 아 보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage