📖简介

micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。

micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。

如何使用

主应用

1、安装依赖

yarn add @micro-zoe/micro-app

2、在入口文件引入

// main.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

3、在页面中嵌入微前端应用

<!-- 👇 name为应用名称，url为应用地址 -->
<micro-app name='my-app' url='http://localhost:3000/'></micro-app>

子应用

在webpack-dev-server的headers中设置跨域支持。

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
},

以上即完成微前端的嵌入，效果如下：

更多详细配置可以查看官网文档

🤝 参与共建

如果您对这个项目感兴趣，欢迎参与贡献，也欢迎 "Star" 支持一下 ^_^

本地运行

1、克隆项目

git clone https://github.com/micro-zoe/micro-app.git

2、安装依赖

yarn bootstrap

3、运行项目

yarn start # 访问 http://localhost:3000

更多命令请查看DEVELP

FAQ

问题汇总

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
}

贡献者们

License

MIT License