micro-app是一款基于类WebComponent进行渲染的微前端框架，不同于目前流行的开源框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
micro-app与技术栈无关，也不和业务绑定，可以用于任何前端框架和业务。
微前端分为基座应用和子应用，我们分别列出基座应用和子应用需要进行的修改，具体介绍micro-app的使用方式。
基座应用以vue框架为例
1、安装依赖
yarn add @micro-zoe/micro-app2、在入口处引入依赖
// main.js
import microApp from '@micro-zoe/micro-app'
microApp.start()3、分配一个路由给子应用
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import MyPage from './my-page.vue'
Vue.use(VueRouter)
const routes = [
{
// 👇 非严格匹配，/my-page/xxx 都将匹配到 MyPage 组件
path: '/my-page/*',
name: 'my-page',
component: MyPage,
},
]
export default routes4、在my-page页面中使用组件
<!-- my-page.vue -->
<template>
<div>
<h1>子应用</h1>
<!-- name为应用名称，全局唯一，url为html地址-->
<micro-app name='app1' url='http://localhost:3000/' baseurl='/my-page'></micro-app>
</div>
</template>url和子应用路由的关系请查看路由一章
子应用以react框架为例
1、添加路由前缀
// router.js
import { BrowserRouter, Switch, Route } from 'react-router-dom'
export default function AppRoute () {
return (
// 👇 添加路由前缀，子应用可以通过window.__MICRO_APP_BASE_URL__获取基座下发的baseurl
<BrowserRouter basename={window.__MICRO_APP_BASE_URL__ || '/'}>
<Switch>
...
</Switch>
</BrowserRouter>
)
}2、在webpack-dev-server的headers中设置跨域支持。
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},以上微前端就可以正常渲染，实现了在vue基座应用中嵌入react子应用，效果如下：
上面列出了react和vue框架的使用方式，它们是可以自由组合的，比如基座应用是react，子应用是vue，或者基座应用是vue，子应用是react，或者基座应用和子应用都是react、vue。 micro-app对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型框架的子应用。
更多详细配置可以查看官网文档
在线案例：https://zeroing.jd.com/micro-app/demo/
如果你对这个项目感兴趣，欢迎提PR参与共建，也欢迎您 "Star" 支持一下 ^_^
1、下载项目
git clone https://github.com/micro-zoe/micro-app.git
2、安装依赖
yarn bootstrap
3、运行项目
yarn start # 访问 http://localhost:3000
默认启动react基座应用，如果想启动vue基座应用，可以运行yarn start:main-vue2
micro-app的优势在哪里？
上手简单、侵入性低，只需改动少量的代码即可接入微前端，同时提供丰富的功能。具体细节请参考文章：micro-app介绍
兼容性如何？
micro-app依赖于CustomElements和Proxy两个较新的API。对于不支持CustomElements的浏览器，可以通过引入polyfill进行兼容，详情可参考：webcomponents/polyfills。
但是Proxy暂时没有做兼容，所以对于不支持Proxy的浏览器无法运行micro-app。
浏览器兼容性可以查看：Can I Use
总体如下：
- PC端：除了IE浏览器，其它浏览器基本兼容。
- 移动端：ios10+、android5+
子应用一定要支持跨域吗？
是的！如果是开发环境，可以在webpack-dev-server中设置headers支持跨域。
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},如果是线上环境，可以通过配置nginx支持跨域。
支持vite吗?
支持，详情请查看适配vite
micro-app base on MIT license