微前端框架 single-spa:创建微前端容器应用
2023-03-09 22:12:00 时间
微前端框架 single-spa:https://zh-hans.single-spa.js.org/
single-spa:https://single-spa.js.org/ 是一个实现微前端架构的框架。
在 single-spa 框架中有三种类型的微前端应用:
1. single-spa-application / parcel:微前端架构中的微应用,可以使用 vue、react、angular 等框架。
2. single-spa root config:创建微前端容器应用。
3. utility modules:公共模块应用,非渲染组件,用于跨应用共享 javascript 逻辑的微应用。
创建容器应用
安装 single-spa 脚手架工具:npm installcreate-single-spa@2.0.3 -g
创建微前端容器应用:create-single-spa
1. 应用文件夹填写 container
2. 应用选择 single-spa root config
3. 组织名称填写 study
组织名称可以理解为团队名称,微前端架构允许多团队共同开发应用,组织名称可以标识应用由哪个团队开发。
应用名称的命名规则为@组织名称/应用名称,比如@study/todos。
4. 启动应用:cd ./singletest && npm start
5. 访问应用:localhost:9000
容器默认代码解析
src/xx-root-config.js
index.ejs
相关文章
- 微信小程序mpvue+Vant Weapp初始化
- Mac 12 连接 V** 的配置步骤(Mac 12 连接 v** 的解决办法)
- H5-vue与原生Android、ios交互获取相册图片
- CleanMyMac X2023有哪些新功能变化?
- ThinkPHP6.0开启调试模式
- 【微信小程序】文章点赞功能的实现
- 应用随即动作指令人脸活体检测技术,避免人脸识别被破解
- 【线性表】—带头哨兵卫单链表的应用
- 【栈与队列】——栈的实现及应用
- 解决开心版justnews 6.0.1手机导航栏空白的问题
- 微信小程序自定义底部弹出框功能
- 微信小程序 — 设置页面的标题
- 微信小程序一键链接WiFi
- HBuilderXHBuilder连接雷电模拟器“未检测到手机或模拟器” —- 问题解决
- 微信小程序内拖动图片实现移动、放大、旋转
- 微信小程序web-view页面安卓下显示空白的解决办法!!!
- 微信小程序console.log无法打印问题
- 微信小程序异步转同步如何实现?(亲测可行)
- 使用postman模拟微信小程序支付回调
- 【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid