目錄創(chuàng)建一個(gè)vite項(xiàng)目創(chuàng)建組件創(chuàng)建一個(gè)vite項(xiàng)目

性能決定成敗;vite確實(shí)快；cmd 命令行(默認(rèn)你已經(jīng)安裝了node & npm)，執(zhí)行npm init @vitejs/app vue-study ? --template vue；cd至vue-study，npm install(安裝依賴); npm run dev（啟動(dòng)項(xiàng)目）；

創(chuàng)建組件

新建一個(gè)目錄為pages，pages下面再新建一個(gè)目錄contents，contens下面可以新建具體的組件目錄頁面，此時(shí)目錄結(jié)構(gòu)為

App.vue

<template> <p @click='onChangeContents(’./pages/contents/gp/gp.vue’)'>郭培</p> <p @click='onChangeContents(’./pages/contents/systemManges/xtcs.vue’)'>系統(tǒng)參數(shù)</p> <p>{{currentTabComponent}}</p> <!-- <Suspense> --> <component :is='DefineAsyncComponent({ // 工廠函數(shù) loader: Modeuls[currentTabComponent], // // 默認(rèn)值：Infinity（即永不超時(shí)，單位 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>

到此這篇關(guān)于vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的文章就介紹到這了,更多相關(guān)vue3.0+vite2動(dòng)態(tài)異步懶加載內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！