vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載
更新時間：2021年06月28日 15:39:52 作者：高梅飛花
學了vue寫項目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時間。本文主要介紹了vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載，感興趣的可以了解一下
創(chuàng)建一個vite項目
性能決定成敗;vite確實快；
cmd 命令行(默認你已經安裝了node & npm)，執(zhí)行npm init @vitejs/app vue-study – --template vue；
cd至vue-study，npm install(安裝依賴); npm run dev（啟動項目）；
創(chuàng)建組件
新建一個目錄為pages，pages下面再新建一個目錄contents，contens下面可以新建具體的組件目錄頁面，此時目錄結構為
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],
// // 默認值：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實現(xiàn)動態(tài)異步組件懶加載的文章就介紹到這了,更多相關vue3.0+vite2動態(tài)異步懶加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了直播程序，Vue input輸入框回車以后自動刷新頁面,適用場景是在輸入框輸入字符并按下回車鍵搜索時，刷新頁面，需要的朋友參考下實現(xiàn)代碼2023-01-01
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue中el-tree樹全部展開或收起的實現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家詳細介紹了vue瀑布流組件實現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了vue2如何實現(xiàn)vue3的teleport，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章給大家介紹了vue中使用moment設置倒計時的方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了解決vue打包后vendor.js文件過大問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了vue封裝一個日歷組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解解決使用axios發(fā)送json后臺接收不到的問題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺接收不到的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06