ManieLam / single-spa-self

vue-single-spa

基于vuejs为底座，single-spa 为框架的微前端工程

试验步骤

1. 主应用建立两种对子应用的调用模式，定制主应用基座

• 主应用建立两种对子应用的调用模式，为该静态资源在本地开启express服务调用(https://juejin.im/post/6844903520378814471，https://www.expressjs.com.cn/starter/static-files.html)；主应用也可使用子应用代码，子应用在主应用注册，实现调用，使用框架qiankun。当主工程监测到路由变化的时候，将寻找是否有对应的路由匹配到应用。
• 修改子应用打包格式、入口引用方式
• 两种模式如何共用，使用qiankun引入静态资源？express服务与主应用的服务如何互相调用，页面互相嵌套? 不然直接将静态资源用到主应用的服务调用。
• 子应用间交互，实践在同一页面同时使用A子应用，B子应用，代码/组件共享（两种模式）
• 各子应用数据共享、子应用间数据通信（同级、父子级），主应用基座数据管理，实践A子应用与B子应用数据共享、状态共享（使用qiankun框架）
• 多个子应用互不影响，子应用A加载失败不会影响子应用B的加载
• 一键开启所有start服务(npm run start:all)

2. 打包部署

• 调整子应用的打包配置，特别关注output.libraryTarget，不同的libraryTarget关乎如何在主应用上调用
• 主基站打包模式，实践运用

3. 后续子应用管理、规范开发

• 所有子应用的打包后文件，版本共享在同个服务可供拉取（CDN？），方便随意取用。主应用使用子应用注册列表，选用指定版本
• 子应用管理：管理子应用运行的环境端口、注册管理需要加入的子应用
• 底层业务（主应用的业务功能）待确定：导航菜单、用户登录，用户管理？
• 组件库，允许所有子应用直接使用组件库插件开发，由特定的人开发？（组件开发不成熟，考虑的场景不够多，自动化测试没有上，设计规范没有定的情况下有点问题）
• 子项目要作为静态资源包引入主应用，需要保证所有子项目的打包后的包目录一致（不然要写一堆适配）
• 是否考虑自开发脚手架，一部生成主应用，通过配置，下载加载指定的子应用（做到统一规范，包括eslint开发严谨程度、）

使用

运行主应用

yarn start:vue yarn start:serve yarn start:main

一键运行所有start命令：yarn start:all

运行子应用vue项目

yarn start:vue

开启express服务只加载静态资源的子应用包

yarn start:serve