vue3.0+vite2实现动态异步组件懒加载
⽬录
创建⼀个vite项⽬
创建组件
创建⼀个vite项⽬
性能决定成败;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 = a.glob('./pages/contents/*/*');
const onChangeContents = function(URL) {
currentTabComponent.value = URL;
vue中reactive
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动态异步懒加载内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。