vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
类别:编程学习 浏览量:2900
时间: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下面可以新建具体的组件目录页面,此时目录结构为
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动态异步懒加载内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue源码系列教程(vue使用引用库中的方法附源码)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue图片切换软件(Vue实现简单图片切换效果)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue原理详解(vue响应式原理与双向数据的深入解析)
- vue中的指令及用法(详解Vue进阶构造属性)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
- 前《iLOOK》时装总监 《快乐大本营》御用造型师上线(快乐大本营御用造型师上线)
- 释小龙晒杀青照片 多重身份惹观众期待(释小龙晒杀青照片)
热门推荐
- sql查询语句casewhen是什么意思(SQL Server中使用判断语句IF ELSE/CASE WHEN 案例)
- mysql8.0安装及配置(MySQL 8.0 之不可见列的基本操作)
- mysql事件教程(关于MySQL报警的一次分析处理详解)
- python内置函数一览表(Python面向对象程序设计构造函数和析构函数用法分析)
- python成绩判断系统(Python根据成绩分析系统浅析)
- js手写数组去重(JS对象数组去重的3种方法示例及对比)
- dedecms数据库调用(DEDECMS直接获取软件模型本地下载地址或服务器名称)
- 响应式布局和自适应布局的不同(浅析两列自适应布局的3种思路)
- python列表中的数组(Python3.4学习笔记之列表、数组操作示例)
- css中分割线的渐变效果(CSS学习笔记之可重复渐变repeating-linear-gradient)