微前端新手入门：micro-app 实践教程

微前端（Micro Frontends）是指将一个大型前端应用拆分成多个独立、松耦合的小型子应用，每个子应用可以独立开发、独立部署，最终通过主应用统一整合展示。上手简单轻量高性能灵活易扩展技术栈兼容好如果你的项目正处在旧项目渐进式改造或多团队协同开发场景，不妨试试 micro-app 👌。

喜葵

1442人浏览 · 2025-06-05 09:57:11

喜葵 · 2025-06-05 09:57:11 发布

📦 微前端新手入门：micro-app 实践教程

本文带你了解微前端的基本概念、micro-app 框架的特性、使用场景及入门实战，适合对微前端感兴趣的前端开发者快速上手。

📖 什么是微前端？

微前端（Micro Frontends）是指将一个大型前端应用拆分成多个独立、松耦合的小型子应用，每个子应用可以独立开发、独立部署，最终通过主应用统一整合展示。

📌 微前端的优势：

技术栈无关：子应用可以使用不同的技术栈（Vue、React、Angular、甚至老旧框架 Avalon）
独立开发、独立部署：子应用可以单独开发、上线、回滚
团队解耦：多个团队可同时开发不同子应用，互不干扰
渐进式改造：适合老项目平滑升级

📌 micro-app 是什么？

micro-app 是一款轻量级、性能优秀的微前端框架，基于 Web Components 实现子应用的运行时隔离，支持 多技术栈共存，内置沙箱，配置简单，适合 Vue3 / React / Vite 场景。

🎯 micro-app 核心特性

特性	说明
沙箱隔离	子应用样式、JS、路由相互隔离，不影响主应用
技术栈无关	子应用可用 Vue、React、Angular、jQuery、原生 HTML 等
独立运行	子应用可独立运行，也可接入主应用
动态加载	子应用按需加载，按路由或页面动态加载
简单易用	配置简单，API 简洁

📦 项目环境搭建

📁 目录结构示例：

micro-frontends/
├── main-app/        # 主应用
├── sub-vue3/        # 子应用 vue3
├── sub-react/       # 子应用 react
└── sub-html/        # 子应用原生 html

📌 安装主应用

1️⃣ 安装 micro-app

npm install micro-app --save

2️⃣ 主应用引入 micro-app

以 Vue3 + Vite 为例：

import { createApp } from 'vue'
import App from './App.vue'
import microApp from '@micro-zoe/micro-app'

const app = createApp(App)
app.use(microApp)
app.mount('#app')

📌 子应用接入

1️⃣ 子应用项目开发

子应用正常开发，无需特殊配置。

2️⃣ 子应用入口文件（如：`index.html`）

需要保证子应用入口能被主应用 iframe / sandbox 加载，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sub Vue3 App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

📌 主应用挂载子应用

方式一：HTML 中直接写 micro-app 标签

<micro-app 
  name="vue3-app" 
  url="http://localhost:8081/" 
  baseroute="/vue3/">
</micro-app>

方式二：Vue3 中动态挂载

<template>
  <micro-app 
    name="vue3-app" 
    url="http://localhost:8081/" 
    baseroute="/vue3/">
  </micro-app>
</template>

⚙️ 配置说明

属性名	说明
`name`	子应用名称，唯一标识
`url`	子应用入口 URL
`baseroute`	子应用路由前缀（可选）
`keep-alive`	是否保活子应用（可选，默认 false）