用qiankun
来实现vue
技术栈的前端微服务
main
是主项目,app-vue-hash
是hash
模式路由的子项目,app-vue-history
是history
模式路由的子项目
qiankun
的开发和打包和正常模式一模一样,它使用一个全局变量__POWERED_BY_QIANKUN__
来区分微前端模式和正常模式,不需要额外的配置和代码。
具体的原理分析和介绍可以看:qiankun 微前端方案实践及总结 和 qiankun 微前端实践总结(二)
在根目录下:
先安装依赖: npm install
,再执行npm run install-all
为所有项目安装依赖,最后执行npm run start-all
即可启动所有的项目。
npm run build-all
可以打包所有vue
项目,jQuery
项目不需要打包。
master
分支:qiankun
的常规基础用法feature/hash-router
分支 :主子项目都是hash
模式feature/keep-alive
分支 :使用loadMicroApp
来实现keep-alive
的tab
效果feature/share-component
分支 :项目间共享组件的例子feature/routing-page
分支 :在主项目的某个路由页面加载子应用feature/share-dependencies
分支 :子项目复用主项目的公共依赖(vue,vuex,vue-router),以及主子项目间 i18n 的处理feature/vite-child
分支 :子项目是 vite 构建的 vue3 项目feature/use-main-app-component
分支 :子项目复用主项目的依赖feature/abstract-route
分支 :主项目同时展示两个子应用的不同页面,子项目使用 abstract 路由develop
分支 :修改源码来实现keep-alive
,以及公共依赖的复用的例子