vue3.0+vite2實現動態異步組件懶加載

性能決定成敗;vite確實快；cmd 命令行(默認你已經安裝了node & npm)，執行npm init @vitejs/app vue-study ? --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>

到此這篇關于vue3.0+vite2實現動態異步組件懶加載的文章就介紹到這了,更多相關vue3.0+vite2動態異步懶加載內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！