1.3.22 • Published 2 days ago
@kbeaver/template-manage-micromain-vue3-js v1.3.22
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>
新建子应用流程(临时)
子应用
- 拷贝 exempla 项目,目录并重命名为需要的应用名称
- 修改
package.json
里的 name 为应用名称 - 修改
vue.config.js
里的端口
主应用
- 在主应用的
main/src/menu-config.tsx
里添加子应用配置
编译 build
编译主应用和一个指定的子应用
$ kb lc build <app name>