零基础基于vue2项目搭建qiankun框架

何为qiankun框架，有什么用？

  • qiankun框架就是基于singl-spa的微前端实现库。通俗的讲就是多个项目有vue开发的，react开发的、angular开发的三个项目，通过一个主应用界面菜单点击分别进入三个应用，但是不会出现跨域，路由正常导航，不会让人发觉是多个项目的实现功能框架。
  • qiankun框架有什么作用？当多个子项目开发完毕分别部署上线使用了，但是现在有需求需要将项目合并到一起，但是项目的开发框架不同，部署地址不同，就无法使用iframe实现跨域，又不想重构项目，就可以用乾坤框架。

qiankun框架从0开始搭建使用

示例： 分别创建两个vue2项目，主应用 qiankun_main, 子应用 qiankun_app1,

  • 提示： 将node版本切换至14版本*
    1、以下说明主应用qiankun_main的操作步骤：
    （1）安装qiankun框架
    npm install qiankun -S
    （2）main.js使用乾坤框架引入子应用
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'app1',  //名字
    entry: '//localhost:8066',  //子应用运行时的服务地址端口
    container: '#app1',  //当前为子应用创建的ip
    activeRule: '/app1'  //子应用的路由
  }
])
start() //启动框架

（3）在页面中添加dom占位符，展示子应用页面
<div id="app1"></div> 这里的id=app1和上面的container对应的id名称对应

2、以下说明子应用qiankun_app1的操作步骤：
（1）安装qiankun框架
npm install qiankun -S
（2）在src同级目录新增文件public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

（3）main.js判断是否是父组件进入
1、识别是否是乾坤框 window.POWERED_BY_QIANKUN
2、使用乾坤框架的生命周期 bootstrap mount unmount

    • 注意</font>：
  • （1）子应用所有的路由前面都要加上/app1的路由才能正确导航到子应用的各个路由*
  • （2）父子应用都应使用hash模式的路由导航*
  • （3）主应用的和子应用的最外层dom的id要区分，不能都是#app*
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容