脚本宝典收集整理的这篇文章主要介绍了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动态异步懒加载内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的vue3.0+vite2实现动态异步组件懒加载全部内容,希望文章能够帮你解决vue3.0+vite2实现动态异步组件懒加载所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。