/micro-app

A lightweight, efficient and powerful micro front-end framework. 一款轻量、高效、功能强大的微前端框架

logo

version downloads license gitter travis coveralls

English|简体中文|官网文档讨论组Gitter群聊

📖简介

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

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

源码地址

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

如何使用

微前端分为基座应用(也可以叫做主应用)和子应用。

这里以一种比较常见的情况举例:基座应用使用vue框架,采用history路由,子应用使用react框架,采用hash路由,我们分别列出基座应用和子应用需要进行的修改,具体介绍micro-app的使用方式。

基座应用

1、安装依赖

yarn add @micro-zoe/micro-app

2、在入口处引入

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

microApp.start()

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

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

子应用

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

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

以上微前端基本渲染完成,效果如下:

result

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