@kbeaver/template-manage-micromain-vue3-ts v1.0.2

micro-frontend-demo 项目

微应用前端项目 demo

.
├── server ----------------------------- node http 服务
├── dist ------------------------------- build 后到资源文件目录
│   ├── child -------------------------- 子应用静态资源
│   │   ├── [appname] ------------------ 子应用资源目录
│   │   └── ...
│   ├── assets ------------------------- 主应用资源
│   ├── index.js ----------------------- 主应用入口js
│   └── index.html --------------------- 主应用入口html
│
├── apps ------------------------------- 应用源码目录
│   ├── [main] ------------------------- 主应用
│   ├── [child app name] --------------- 子应用
│   └── ...
│
├── design ----------------------------- 设计模型与模型模板
│   ├── model
│   │   ├── [model name] --------------- 视图模型
│   │   │   └── model.json ------------- 模型描述文件
│   │   └── index.json ----------------- 所有视图模型索引
│   │
│   └── apps
│       ├── main ----------------------- 主应用
│       │   ├── router.json ------------ 应用路由配置
│       │   ├── menu.json -------------- 应用菜单配置
│       │   └── app.json --------------- 应用基本信息配置
│       ├── [...child-app] ------------- 子应用
│       │   └── ...
│       └── index.json ----------------- 应用列表
│
├── kb.json ---------------------------- kbeaver cli 项目配置文件
└── ...

安装依赖

安装主应用及所有子应用的依赖包

pnpm i

给指定的子应用安装指定的包

pnpm add --filter <app name> vuex

开发 Development

启动一个指定的子应用

$ kb lc dev <app name>

启动主应用和一个指定的子应用

$ kb lc serve <app name>

新建子应用流程（临时）

子应用

1. 拷贝 exempla 项目，目录并重命名为需要的应用名称
2. 修改 package.json 里的 name 为应用名称
3. 修改 vue.config.js 里的端口

主应用

1. 在主应用的 main/src/menu-config.tsx 里添加子应用配置

编译 build

编译主应用和一个指定的子应用

$ kb lc build <app name>

预览 preview

部署