微前端:quankun

零: 前言

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

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

一: 创建项目

主项目

typescript 复制代码
yarn create vite main-app --template react-ts

micro-react01项目

typescript 复制代码
npx create-react-app micro-react01 --template typescript

micro-vue01项目

typescript 复制代码
yarn create vite micro-vue01 --template vue-ts

二: 主项目操作

typescript 复制代码
npm i quankun -S

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

typescript 复制代码
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',
// });

帮加上插槽地址

typescript 复制代码
<div id='yourContainer1'></div>
        <div id='yourContainer2'></div>

最终如下

app.tsx

typescript 复制代码
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

三: 微项目操作

micro-react01项目

typescript 复制代码
在package.json中加入
  "devServer": {
    "headers": {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
      "Access-Control-Allow-Headers": "*"
    }
  }
  执行npm run build打包

然后启动服务

typescript 复制代码
npm i serve -g
serve

得到服务地址localhost:3001

四: 访问微应用

访问: 主项目地址/app1,

此时,发现micro-react01应用已经加载出来了

相关推荐
吃饺子不吃馅14 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多23 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆32 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar37 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端