乾坤qiankun搭建前端微服务

本教程得当于qiankun新手，手把手教你搭建一个简朴的本地前端微服务，附完备代码
  一、什么是微前端

  微前端是一种多个团队通过独立发布功能的方式来共同构建当代化 web 应用的技能本领及方法计谋。
微前端架构焦点代价：

  

• 技能栈无关：主框架不限定接入应用的技能栈，微应用具备完全自主权  
  
• 独立开发、独立摆设：微应用堆栈独立，前后端可独立开发，摆设完成后主框架自动完成同步更新  
  
• 增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的体系做全量的技能栈升级或重构，而微前端是一种非常好的实行渐进式重构的本领和计谋  
  
• 独立运行时：每个微应用之间状态隔离，运行时状态不共享
  

二、qiankun 的焦点计划理念

  

• 简朴
    由于主应用微应用都能做到技能栈无关，qiankun 对于用户而言只是一个雷同 jQuery 的库，你须要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的计划，使得微应用的接入像利用 iframe 一样简朴。  
  
• 解耦/技能栈无关
    微前端的焦点目标是将巨石应用拆解成多少可以自治的松耦合微应用，而 qiankun 的诸多计划均是秉持这一原则，如 HTML entry、沙箱、应用间通讯等。如许才华确保微应用真正具备 独立开发、独立运行 的本领。
  

特性

  

• 基于 single-spa 封装，提供了更加开箱即用的 API。  
  
• 技能栈无关，恣意技能栈的应用均可 利用/接入，岂论是 React/Vue/Angular/JQuery 还是其他等框架。  
  
• HTML Entry 接入方式，让你接入微应用像利用 iframe 一样简朴。  
  
• 样式隔离，确保微应用之间样式相互不干扰。  
  
• JS 沙箱，确保微应用之间 全局变量/变乱 不辩说。  
  
• 资源预加载，在欣赏器空闲时间预加载未打开的微应用资源，加快微应用打开速率。  
  
• umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构体系。
  

三、代码演示

1、创建并设置主应用

  

• 通过pnpm create vue@latest创建一个Vue3项目为主应用。  
  
• 安装qiankun：pnpm i qiankun -S  
  
• 注册微应用并启动
  打开src下的main.ts文件，注册微应用，代码如下，这里注册了两个子应用sub-vue、sub-react
  

1. import {
2.    
3.     registerMicroApps, start } from 'qiankun'
4. // 注册微应用
5. registerMicroApps([
6.   {
7.    
8.    
9.     name: 'sub-vue', //子应用的名称
10.     entry: '//localhost:3001', //子项目启动后的地址
11.     container: '#container', //加载的容器
12.     activeRule: '/sub-vue' //匹配的路由
13.   },
14.   {
15.    
16.    
17.     name: 'sub-react',
18.     entry: '//localhost:3002',
19.     container: '#container',
20.     activeRule: '/sub-react'
21.   }
22. ])
23. // 启动 qiankun
24. start()

复制代码

2、创建并设置Vue子项目

  

• 通过pnpm create vue@latest创建一个Vue3子应用。  
  
• 通过pnpm i vite-plugin-qiankun安装vite-plugin-qiankun依靠包。  
  
• 在vite.config.js文件中设置qiankun插件，
  

1. import {
2.    
3.     fileURLToPath, URL } from 'node:url'

复制代码