vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載
更新時(shí)間：2021年06月28日 15:39:52 作者：高梅飛花
學(xué)了vue寫項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載，感興趣的可以了解一下
創(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下面可以新建具體的組件目錄頁(yè)面，此時(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,下面這篇文章主要給大家介紹了關(guān)于從零開(kāi)始搭建vue3項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
VUE跳轉(zhuǎn)外部鏈接與網(wǎng)頁(yè)的方法示例
這篇文章主要給大家介紹了關(guān)于VUE跳轉(zhuǎn)外部鏈接與網(wǎng)頁(yè)的方法,記錄一下在vue項(xiàng)目中如何實(shí)現(xiàn)跳轉(zhuǎn)到一個(gè)新頁(yè)面,需要的朋友可以參考下2023-06-06
Vue3和Vue2基本差不多，只不過(guò)需要將createRouter、createWebHistory從vue-router中引入，再進(jìn)行使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
關(guān)于keep-alive路由多級(jí)嵌套不生效的解決方案
本文主要介紹了關(guān)于keep-alive路由多級(jí)嵌套不生效的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
下面小編就為大家分享一篇vue2.0 子組件改變props值,并向父組件傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法，這段代碼主要使用c3平滑屬性實(shí)現(xiàn),需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了VUE3使用JSON編輯器方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學(xué)，可以參考下2021-04-04