《vue3+ts+element-plus 后台管理系统系列》之微前端版本

文章目录

• 系列文章目录

• 前言

• • 一、RuoYi-Vue3-qiankun的由来

• 二、设计思路

• • 最初的设计是这样的：

• 最终设计

• 三、实现步骤细节

• • 1、主应用注册子应用

• 2、主应用加载后端路由（全部项目内容）

• 3、主应用菜单跳转子应用

---

前言

=============================================================

这篇文章本来写于一年前，今天突然有人加我问起RuoYi-Vue3-qiankun库如何实现的，我瞬间失忆了，一年前的代码不知道怎么写的了。

所以写下这篇用来以后回忆。

一、RuoYi-Vue3-qiankun的由来

---

---

在 vue3+ts+element-plus 的基础上，实践了一下，将RuoYI前后端分离版本前端重写了一下，产生了RuoYi-Vue3 开源版本。

但是这个版本并不能更好的满足公司技术需求，在RuoYi-Vue3的基础上 加入了qiankun ，改成了微前端的版本。

RuoYi-Vue3仓库地址：https://github.com/RainManGO/RuoYi-Vue3

RuoYi-Vue3-qiankun仓库地址：

https://github.com/RainManGO/RuoYi-Vue3-qiankun

二、设计思路

---

---

最初的设计是这样的：

• 主应用：负责注册加载子应用，不负责侧边栏菜单路由，子应用组织好路由，提供给主应用加载。

• 子应用： 自己加载后端路由，然后通信主应用渲染上

但是这样做，我没法控制所有的子应用都加载完，主应用再渲染，也不利于统一管理后端路由。

最终设计

更改了思路，采用主应用加载菜单数据。主应用没有子应用组件和路由只是通过url 调用。

三、实现步骤细节

---

---

这里贴图，具体找到仓库代码查看。

1、主应用注册子应用

对象篇

模块化编程-自研模块加载器