微前端：quankun

零： 前言

微前端可以将大应用拆分功能独立的微应用，可独立开发部署，
每个微应用可以采用自己的技术栈，这样更好维护和拓展。

微前端也会存在跨域 权限控制 数据共享 性能(页面加载时间) 安全 
多团队协作(一个团队负责一个页面或模块) 组件重用。要采用适合的方案
1
2
3
4
5

一： 创建项目

主项目

yarn create vite main-app --template react-ts
1

micro-react01项目

npx create-react-app micro-react01 --template typescript
1

micro-vue01项目

yarn create vite micro-vue01 --template vue-ts
1

二： 主项目操作

npm i quankun -S
1

在主项目app.tsx加入下面的代码

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'reactapp', // app name registered
    entry: '//localhost:3001',
    container: '#yourContainer1',
    activeRule: '/app1',
  },
  {
    name: 'vueapp',
    entry: '//localhost:5175',
    container: '#yourContainer2',
    activeRule: '/app2',
  },
]);

start();

import { loadMicroApp } from 'qiankun';

// loadMicroApp({
//   name: 'reactapp',
//   entry: '//localhost:3001',
//   container: '#yourContainer1',
// });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

帮加上插槽地址

<div id='yourContainer1'></div>
        <div id='yourContainer2'></div>
1
2

最终如下
app.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'reactapp', // app name registered
    entry: '//localhost:3001',
    container: '#yourContainer1',
    activeRule: '/app1',
  },
  {
    name: 'vueapp',
    entry: '//localhost:5175',
    container: '#yourContainer2',
    activeRule: '/app2',
  },
]);

start();

import { loadMicroApp } from 'qiankun';

// loadMicroApp({
//   name: 'reactapp',
//   entry: '//localhost:3001',
//   container: '#yourContainer1',
// });

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        mainapp
        <div id='yourContainer1'></div>
        <div id='yourContainer2'></div>
      </div>
    </>
  )
}

export default App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

三： 微项目操作

micro-react01项目

在package.json中加入
  "devServer": {
    "headers": {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
      "Access-Control-Allow-Headers": "*"
    }
  }
  执行npm run build打包
1
2
3
4
5
6
7
8
9

然后启动服务

npm i serve -g
serve
1
2

得到服务地址localhost:3001

四： 访问微应用

访问： 主项目地址/app1,
此时，发现micro-react01应用已经加载出来了