首页 > 其他分享 >QianKun vue2 改造主应用 vue3+vite 改造子应用

QianKun vue2 改造主应用 vue3+vite 改造子应用

时间:2024-06-17 11:11:24浏览次数:9  
标签:vue2 改造 配置 js QianKun 应用 vue3 vite

一:Vue2 改造主应用 创建方式:vue create vue2-master 

1:在vue2项目src 下 撞见qiankun 文件夹 用于注册和启动子应用配置

创建index.js

创建app.js。注册。 name 要和子应用vite.config.js 配置相同。 container 要和 indexView 中id 相同

创建indexView.vue 。用于显示微应用容器

 

2:在应用main.js 中 引入配置

3: 在router.js 中配置子应用的路由。挂载在之前的indexView.vue 下

 

4:在主应用的菜单 配置需要跳转微应用的路由菜单 

 

 二:修改vue3+vite 为微应用。创建方式  npm init vite@latest 

1:修改main.ts

 

2:配置vite.config.ts

 

3:配置微应用的router.js. 添加项目前缀path

 

 

4:显示隐藏布局

 

 

效果如下:

 

标签:vue2,改造,配置,js,QianKun,应用,vue3,vite
From: https://www.cnblogs.com/Gherardo/p/18251984

相关文章

  • Vue微前端架构与Qiankun实践理论指南
    title:Vue微前端架构与Qiankun实践理论指南date:2024/6/15updated:2024/6/15author:cmdragonexcerpt:这篇文章介绍了微前端架构概念,聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化,以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应......
  • 手把手教你改造 Sentinel Dashboard 实现配置持久化
    一.概述Sentinel客户端默认情况下接收到Dashboard推送的规则配置后,可以实时生效。但是有一个致命缺陷,Dashboard和业务服务并没有持久化这些配置,当业务服务重启后,这些规则配置将全部丢失。Sentinel提供两种方式修改规则:通过API直接修改(loadRules)通过DataSource适配......
  • Vue微前端架构与Qiankun实践理论指南
    title:Vue微前端架构与Qiankun实践理论指南date:2024/6/15updated:2024/6/15author:cmdragonexcerpt:这篇文章介绍了微前端架构概念,聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化,以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应用与子......
  • Vue2学习八-Vue核心(生命周期)
    目录17.生命周期17.1什么是生命周期17.2 分析生命周期17.3生命周期总结17.生命周期17.1什么是生命周期<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>引出生命周期</title> <!--引入Vue--> <scripttype="text/java......
  • Vue2学习九-Vue组件化编程(非单文件组件、单文件组件)
    18.非单文件组件18.1.基本使用Vue中使用组件的三大步骤: 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签)一、如何定义一个组件? 使用Vue.extend(options)创建,其中options和newVue(options)时传入的那个options几乎一样,但也有点区别; 区别如下: 1.......
  • 微服务架构qiankun集成react子应用
    前一篇文章讲了qiankun集成vue子应用,这篇随笔讲集成react子应用。1、创建react子应用用react脚手架初始化一个react项目,至于项目的数据仓库store和路由、以及UI组件库这里就不做讲解,可以自己自行网上找资料配置。create-react-appmy-react-app2、在src路径下创建publicPat......
  • 前端微服务架构qiankun初体验
    一、背景‘熵增’问题一直是所有软件开发中都会遇到的问题,不管是前端还是后端都会遇到,老的系统在需求不断变更或者迭代,代码量会越来越大,最终都会形成一座‘屎山’,今天主要讨论前端对于这种情况的解决方案。目前前端的解决方案有比较古老的iframe,但是iframe是完全隔绝了......
  • 国思RDIF.vNext全新低代码快速开发框架平台6.1版本发布(支持vue2、vue3)
    1、平台介绍RDIF.vNext,全新低代码快速开发集成框架平台,给用户和开发者最佳的.Net框架平台方案,为企业快速构建跨平台、企业级的应用提供强大支持。RDIF.vNext的前身是RDIFramework框架,RDIF(RapiddevelopIntegrateFramework,vNext代表全新下一代),全新设计,全新开发,代码量减......
  • [vue2]深入理解vuex
    本节内容概述初始化仓库定义数据访问数据修改数据处理异步派生数据模块拆分案例-购物车概述vuex是一个vue的状态管理工具,状态就是数据场景某个状态在很多个组件使用(个人信息)多个组件共同维护一份数据(购物车)优势数据集中式管理数据响应式变化初始化仓库......
  • Vue2入门之超详细教程十八-自定义指令
    Vue2入门之超详细教程十四-自定义指令1、简介定义语法分为局部自定义指令和全局自定义指令配置对象中常用的3个回调bind:指令与蒜素被插入成功时调用inserted:指令所在元素被插入页面时被调用update:指令所在模板结构被重新解析时调用备注:指令定义时不加v-,但使用时......