唯品秀前端博客
当前位置: 别出心裁-妙 >

手把手教你基于微前端qiankun的应用实践（上篇）

作者：管理员 2022-08-29 23:37:59 分类：别出心裁-妙 阅读（2942） 1

qiankun孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。无法理解？说明当前公司背景环境用不上，直接略过

学习目标

本文通过一个传统cli搭建的vue2.x主应用去加载一个基于vite2 + vue3.x的子应用，然后跑起来，实现最基本的起手式操作

主应用

  • 利用vue脚手架创建一个vue2.0项目：qiankun-main，路由设置成history模式
  • 打开项目qiankun-main，安装qiankun（npm install qiankun --save）
  • 修改App.vue，新增一个VueChild的router-link，to值为“/vueChild”，并在router-view的下方新增一个id为vueContainer的div盒子（用于承载子应用）
  • 修改main.js，导入qiankun中的registerMicroApps和start两个方法，注册子应用并启动qiankun
::CODECOLORER_BLOCK_
剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(29) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 1 条评论关于"手把手教你基于微前端qiankun的应用实践（上篇）"

表情

最新评论

  1. Rose
    Windows 10 Chrome 104.0.0.0

    很强，主题已支持设置付费内容了

    120.219.49.128 2022-09-09 11:27 回复
    2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏