《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、主应用注册子应用

对象篇

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

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要搭建一个vue3 ts pinia element-plus后台管理系统框架,可以按照以下步骤进行: 1. 安装Node.js和Vue CLI Vue CLI是用于创建和管理Vue项目的官方工具,需要先安装Node.js和Vue CLI。 2. 创建基于Vue3和TypeScript的项目 使用Vue CLI创建一个基于Vue3和TypeScript的项目,输入以下命令: ``` vue create my-project --preset=@vue/cli-plugin-typescript ``` 3. 安装Pinia Pinia是一个Vue 3状态管理库,可以用于管理应用程序的状态。在项目中安装Pinia,输入以下命令: ``` npm install pinia ``` 4. 安装Element Plus Element Plus是一个基于Vue.js 3的UI库,可用于构建后台管理系统。在项目中安装Element Plus,输入以下命令: ``` npm install element-plus ``` 5. 创建页面和组件 根据项目需求,创建页面和组件。 6. 配置Pinia 在main.ts中引入Pinia,并在创建Vue实例时使用它。示例代码如下: ```typescript import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.mount('#app') ``` 7. 配置Element Plus 在main.ts中引入Element Plus,并在创建Vue实例时使用它。示例代码如下: ```typescript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 8. 编写页面和组件 使用Vue3和TypeScript编写页面和组件。 9. 运行项目 运行项目,输入以下命令: ``` npm run serve ``` 以上就是搭建一个vue3 ts pinia element-plus后台管理系统框架的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值