微前端 Micro-App 实践，如何进行？

嘿，老友！你Zui近有没有玩过微前端？别说我没提醒你，真的是现在项目里Zui火的技术之一。

先给你点背景：把一个大项目拆成几个小子应用，团队Ke以各自负责，部署也Neng独立。听起来是不是hen爽？

那咱们怎么开始？下面就按着点步骤慢慢来别急，我会用代码演示，让你一眼kan懂。

你得有个主应用，也叫基座。它会挂载子应用。

import microApp from "@micro-zoe/micro-app";
microApp.start;

然后你的子应用就Ke以随时被加载啦。比如一个 React 子应用：

import microApp from "@micro-zoe/micro-app";
 {
    // 给app1发送数据
    microApp.setData("app1", {
        user: "xxxlili",
    });
}}>
Set data

在 app1 那边你Ke以这么拿：

import microApp from "@micro-zoe/micro-app";
 {
    // 给app1发送数据
    const data = microApp.getData;
    console.log;
}}>
get data

你可Neng会担心子应用之间的样式互相干扰。别怕，Micro-App 用了 Scoped CSS。

核心思路是给每条规则加上 app 特定的 name 前缀。于是样式只在自己的标签内生效。

微前端有三大流派：

运行时框架: 在浏览器里动态挂载子应用。

构建时方案: 把多个子包打包到一起，然后再拆分。

基础技术: Web Components、Shadow DOM 等。

 {
    window?.microApp?.dispatch({
        type: "test",
        data: { name: "team" },
    });
}}>
发送数据

import React, { useEffect } from "react";
import microApp from "@micro-zoe/micro-app";
export function MyPage {
  useEffect => {
    microApp.setData;
  }, );
  return (
    

      
    
  );
}
export default MyPage;

function App {
  const  = useState;
  return (
    <>
Click me times:{count}
Click me app
       setCount}>+ one
      Go Vue App