forked from MAXLZ1/micro-app-demos
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
15 additions
and
161 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,168 +1,22 @@ | ||
# 微前端框架示例汇总 | ||
|
||
为方便利用Github Page进行展示,以下应用均使用`hash`路由。 | ||
|
||
## qiankun demo | ||
|
||
线上地址:[https://maxlz1.github.io/micro-app-demos/qiankun-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/qiankun-demo/vue3-main/) | ||
|
||
本地启动命令 | ||
```bash | ||
pnpm i | ||
pnpm run qiankun-demo:start | ||
``` | ||
|
||
### 文件目录 | ||
|
||
```bash | ||
└── qiankun-demo | ||
├── react-child # react18子应用(作为嵌套应用的主应用) | ||
├── vite-child # react18-vite子应用 | ||
├── vue2-child # vue2子应用 | ||
└── vue3-main # vue3主应用 | ||
``` | ||
|
||
### 功能列表[](README.md) | ||
|
||
- [x] 应用间通信(利用`CustomEvent`) | ||
- [x] 多个子应用共存 | ||
- [x] CSS隔离 | ||
- [x] 主子应用间跳转 | ||
- [x] 嵌套子应用 | ||
- [x] 资源预加载 | ||
- [x] 子应用保活 | ||
- [x] 接入vite子应用 | ||
|
||
具体功能实现细节参考:[功能实现说明](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/qiankun-demo#功能实现说明) | ||
|
||
## MicroApp demo | ||
|
||
线上地址:[https://maxlz1.github.io/micro-app-demos/micro-app-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/micro-app-demo/vue3-main/) | ||
|
||
本地启动命令 | ||
```bash | ||
pnpm i | ||
pnpm run micro-app-demo:start | ||
``` | ||
|
||
### 文件目录 | ||
|
||
```bash | ||
└── micro-app-demo | ||
├── react-child # react18子应用(作为嵌套应用的主应用) | ||
├── vite-child # react18-vite子应用 | ||
├── vue2-child # vue2子应用 | ||
└── vue3-main # vue3主应用 | ||
``` | ||
|
||
### 功能列表 | ||
|
||
- [x] 应用间通信 | ||
- [x] 多个子应用共存 | ||
- [x] CSS隔离 | ||
- [x] 主子应用间跳转 | ||
- [x] 嵌套子应用 | ||
- [x] 资源预加载 | ||
- [x] 子应用保活 | ||
- [x] 接入vite子应用 | ||
|
||
具体功能实现细节参考:[功能实现说明](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/micro-app-demo#功能实现说明) | ||
|
||
## icestark demo | ||
该仓库集合了以[qiankun](https://qiankun.umijs.org/zh)、[MicroApp](https://micro-zoe.github.io/micro-app/)、[icestark](https://micro-frontends.ice.work/)、[wujie](https://wujie-micro.github.io/doc/)、[Garfish](https://www.garfishjs.org/)为基础实现的多种微前端示例。 | ||
|
||
线上地址:[https://maxlz1.github.io/micro-app-demos/icestark-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/icestark-demo/vue3-main/) | ||
|
||
本地启动命令 | ||
```bash | ||
pnpm i | ||
pnpm run icestark-demo:start | ||
``` | ||
|
||
### 文件目录 | ||
|
||
```bash | ||
└── icestark-demo | ||
├── react-child # react18子应用(作为嵌套应用的主应用) | ||
├── vite-child # react18-vite子应用 | ||
├── vue2-child # vue2子应用 | ||
└── vue3-main # vue3主应用 | ||
``` | ||
|
||
### 功能列表 | ||
|
||
- [x] 应用间通信 | ||
- [x] 多个子应用共存 | ||
- [x] CSS隔离 | ||
- [x] 主子应用间跳转 | ||
- [x] 嵌套子应用 | ||
- [x] 资源预加载 | ||
- [x] 子应用保活 | ||
- [x] 接入vite子应用 | ||
|
||
具体功能实现细节参考:[功能实现说明](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/icestark-demo#功能实现说明) | ||
|
||
## wujie demo | ||
|
||
线上地址:[https://maxlz1.github.io/micro-app-demos/wujie-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/wujie-demo/vue3-main/) | ||
|
||
本地启动命令 | ||
```bash | ||
pnpm i | ||
pnpm run wujie-demo:start | ||
``` | ||
|
||
### 文件目录 | ||
|
||
```bash | ||
└── wujie-demo | ||
├── react-child # react18子应用(作为嵌套应用的主应用) | ||
├── vite-child # react18-vite子应用 | ||
├── vue2-child # vue2子应用 | ||
└── vue3-main # vue3主应用 | ||
``` | ||
|
||
### 功能列表 | ||
|
||
- [x] 应用间通信 | ||
- [x] 多个子应用共存 | ||
- [x] CSS隔离 | ||
- [x] 主子应用间跳转 | ||
- [ ] 嵌套子应用 | ||
- [x] 资源预加载 | ||
- [x] 子应用保活 | ||
- [x] 接入vite子应用 | ||
|
||
具体功能实现细节参考:[功能实现说明](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/wujie-demo#功能实现说明) | ||
|
||
## Garfish demo | ||
|
||
线上地址:[https://maxlz1.github.io/micro-app-demos/garfish-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/garfish-demo/vue3-main/) | ||
|
||
本地启动命令 | ||
```bash | ||
pnpm i | ||
pnpm run garfish-demo:start | ||
``` | ||
为方便利用Github Page进行展示,以下应用均使用`hash`路由。 | ||
|
||
### 文件目录 | ||
**线上地址:** | ||
|
||
```bash | ||
└── garfish-demo | ||
├── react-child # react18子应用(作为嵌套应用的主应用) | ||
├── vite-child # react18-vite子应用 | ||
├── vue2-child # vue2子应用 | ||
└── vue3-main # vue3主应用 | ||
``` | ||
- qiankun demo:[https://maxlz1.github.io/micro-app-demos/qiankun-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/qiankun-demo/vue3-main/) | ||
- MicroApp demo:[https://maxlz1.github.io/micro-app-demos/micro-app-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/micro-app-demo/vue3-main/) | ||
- icestark demo:[https://maxlz1.github.io/micro-app-demos/icestark-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/icestark-demo/vue3-main/) | ||
- wujie demo:[https://maxlz1.github.io/micro-app-demos/wujie-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/wujie-demo/vue3-main/) | ||
- Garfish demo:[https://maxlz1.github.io/micro-app-demos/garfish-demo/vue3-main/](https://maxlz1.github.io/micro-app-demos/garfish-demo/vue3-main/) | ||
|
||
### 功能列表[](README.md) | ||
|
||
- [x] 应用间通信 | ||
- [x] 多个子应用共存 | ||
- [x] CSS隔离 | ||
- [x] 主子应用间跳转 | ||
- [x] 嵌套子应用 | ||
- [x] 资源预加载 | ||
- [x] 子应用保活 | ||
- [x] 接入vite子应用 | ||
**各应用仓库地址:** | ||
|
||
具体功能实现细节参考:[功能实现说明](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/garfish-demo#功能实现说明) | ||
- [qiankun demo](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/qiankun-demo) | ||
- [MicroApp demo](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/micro-app-demo) | ||
- [icestark demo](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/icestark-demo) | ||
- [wujie demo](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/wujie-demo) | ||
- [Garfish demo](https://github.com/MAXLZ1/micro-app-demos/tree/main/packages/garfish-demo) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters