Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
MAXLZ1 committed Oct 27, 2022
1 parent 736874f commit b4547c1
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 161 deletions.
174 changes: 14 additions & 160 deletions README.md
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)
2 changes: 1 addition & 1 deletion packages/wujie-demo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ pnpm run wujie-demo:start
- [x] 多个子应用共存
- [x] CSS隔离
- [x] 主子应用间跳转
- [x] 嵌套子应用
- [ ] 嵌套子应用
- [x] 资源预加载
- [x] 子应用保活
- [x] 接入vite子应用
Expand Down

0 comments on commit b4547c1

Please sign in to comment.