微前端qiankun集成

关于ant desgin of vue 微前端qiankun项目集成

qiankun介绍

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

什么是微前端

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，子应用具备完全自主权
• .独立开发、独立部署
  子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
• 增量升级
  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
• 独立运行时
  每个子应用之间状态隔离，运行时状态不共享

步骤

1. 下载qiankun

$ git clone https://github.com/umijs/qiankun.git

2. 安装依赖

$ yarn install
$ yarn examples:install

3. 运行qiankun项目

$ yarn examples:start

4. 查看项目是否跑成功

http://localhost:7099

集成ant desgin of vue项目到qiankun

1. 主项目main中的index.html中修改侧边栏

<ul class="mainapp-sidemenu">
    <li onclick="push('/react16')">React16</li>
    <li onclick="push('/react15')">React15</li>
    <li onclick="push('/vue')">Vue</li>
    <li onclick="push('/angular9')">Angular9</li>
    <li onclick="push('/project')">蚂蚁</li>
 </ul>

2. 注册子应用(在主项目main中的index.js中)

registerMicroApps(
  [
    {
   
      name: 'react16',
      entry: '//localhost:7100',
      render,
      activeRule: genActiveRule('/react16'),
    },
    {
   
      name: 'react15',
      entry: '//localhost:7102',
      render,
      activeRule: genActiveRule('/react15'),
    },
    {
   
      name: 'vue',
      entry: '//localhost:7101',
      render,
      activeRule: genActiveRule('/vue'),
    },
    {
   
      name: 'angular9',
      entry: '//localhost:7103',
      render,
      activeRule: genActiveRule('/angular9'),
    },
    {
   
      name: 'project',
      entry: '//localhost:8000