当前位置:编程学习 > > 正文

vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)

时间:2021-10-22 07:24:43类别:编程学习

vue2和vue3都如何创建项目

vue3.0+vite2实现动态异步组件懒加载

创建一个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下面可以新建具体的组件目录页面,此时目录结构为

vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)

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动态异步懒加载内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐