Toggle navigation
我的博客
首页
文章列表
留言板
登录
注册
首页
技术分享
文章
qiankun
作者:
gaohan
•
2023年04月24日
阅读 (641)
:::align-left
**qiankun** 是一种支持微前端架构的前端解决方案,它可以帮助开发者在一个页面中并列呈现多个不同的子应用程序,同时让每个子应用程序都能够保持自己的独立性和完整性。以下是使用qiankun框架设计微前端模型的步骤:
:::align-left
1. 首先确定qiankun首屏主应用,这个主应用通常指定为全站或者入口应用,它包含了整个项目的配置文件和依赖管理机制,并且能够注册所有需要加载的子应用程序。
2. 然后开始创建我们的子应用程序,也就是独立的前端应用程序组件,每个子应用必须符合 qiankun 要求,包括要有自己的路由系统、状态管理方式 和启动/卸载生命周期函数,并通过ajax等形式与主应用程序数据交互。
3. 子应用程序以独立的文件夹子目录划分,内部尽量按约定大于配置原则建设,可以使用任何技术堆栈编写,在确保满足 qiankun 框架规范下即可。
4. 当子应用程序创建完成后,我们要将它们正确接入到主应用程序里面。在主应用中配置router、store、fetch等等基础设施。配置好后,应当在qiankun加载器中通过registerMicroApps方法将所有子应用程序注册到主应用程序中。
5. 在实际运行过程中,我们可以通过手动点击、路由跳转等操作触发切换某个子应用,也可以在编写程序时准备预先定义的配置项根据需要动态变化页面呈现。 注意 qiankun 子应用的性能、缓存问题,提升 qiankun 应用渲染效率和用户体验。
6. 另外,在主应用程序级别内,您还可以使用 qiankun 提供的一些扩展 API 来管理微前端架构中的共享状态、信息传递机制或错误处理等方面问题。
7. 最后,根据具体情况进行必要的测试和调整,确保多种子模块交叉以及与主应用之间的各项特性保持正常工作即可。
© 著作权归作者所有
分类
技术分享
标签
vue
工作总结