# robot-ts-micro

**Repository Path**: robotchange/robot-ts-micro

## Basic Information

- **Project Name**: robot-ts-micro
- **Description**: 基于vue3+typeScript+qiankun2的微前端开发框架
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2021-12-21
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE3+TS+QIANKUN微前端框架

### 技术选型
```
vue3(script-setup写法)
qiankun2
TypeScript
vue-router4
vuex4
axios
```

## 项目结构
```
h5-edit             H5在线编辑器
low-code            低代码
main                主应用
├── public
│   ├── index.html
├── src                                  // 源代码
│   ├── api                              // api请求库
│   ├── assets                           // 静态资源
│   ├── common-lib                       // 公共组件库（单独仓库维护）
│   ├── components                       // 应用-业务组件
│   ├── qiankun                          // qiankun
│   ├── router                           // 路由管理 
│   ├── store                            // vuex
│   ├── utils                            // 应用-工具类
│   ├── views                            // 页面
│   ├── App.vue                          
│   ├── globalRegister.ts                // 全局组件，工具类挂载注册
│   ├── main.ts                          // 入口
│   ├── registerServiceWorker.ts         
│   ├── shims-vue.ts                     
├── .env.development                    
├── .env.production                     
├── .env.test                            
├── .eslintignore                        
├── .eslintrc.js                         
├── .gitignore                           
├── babel.config.js                      
├── package.json                         
├── README.md                           
├── tsconfig.json                        
├── vue.config.js                        
```

## 公共组件库在各应用中的引入方式
```
考虑到维护及更新方便，公共组件库采用单独仓库维护的方式，更新及拉取指令如下
公共组件仓库地址：https://gitee.com/robotchange/attridge-common.git

git subtree add --prefix=src/common-lib https://gitee.com/robotchange/attridge-common.git master --squash
git subtree pull --prefix=main/src/common-lib https://gitee.com/robotchange/attridge-common.git master --squash
git subtree push --prefix=main/src/common-lib https://gitee.com/robotchange/attridge-common.git master --squash
```
![avatar](./source/公共组件.png)


## 主应用及子应用运行布局

![avatar](./source/微前端逻辑.png)

## 主子应用通信
```
主应用和子应用通信采用vuex的subscribe + qiankun自带的initGlobalState，onGlobalStateChange
如下所示：
```
![avatar](./source/父子应用通信.png)

```
更多组件及使用方式请参见common-lib仓库
gitee地址：https://gitee.com/robotchange/robot-qiankun-common.git
```

## 脚手架工具
```
针对vue3+qiankun创建微前端主应用、子应用的流程，写了一个简单的脚手架工具
使用方式：
npm i robot-auto-script -g

查看版本
robot-auto-script -v
创建乾坤主应用
robot-auto-script init vmt projectName
创建乾坤子应用
robot-auto-script init vst projectName
```