同步操作将从 cxlt216/micro-app 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
English|简体中文|Documentation|Discussions|Gitter
micro-app is a micro front-end framework launched by JD Retail. It renders based on webcomponent-like and realizes the micro front-end from component thinking, it aiming to reduce the difficulty of getting started and improve work efficiency.
It is the lowest cost framework for accessing micro front-end, and provides a series of perfect functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plugin system, data communication and so on.
micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.
The micro front end is divided into a base application (also called main application) and a micro application.
Here is a common example: the base application uses the Vue framework, uses history routing, the micro application uses the react framework, and uses hash routing. We list the modifications that need to be made by the base application and the micro application, and introduce the use of micro-app in detail.
1、Install
yarn add @micro-zoe/micro-app
2、import at the entrance
// main.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
3、Use components in page
<!-- my-page.vue -->
<template>
<!-- 👇 name is the app name, url is the app address -->
<micro-app name='my-app' url='http://localhost:3000/'></micro-app>
</template>
Set cross-domain support in the headers of webpack-dev-server
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
The above micro front-end rendering is completed, and the effect is as follows:
More detailed configuration can be viewed Documentation.
If you're interested in this project, you're welcome to mention pull request, and also welcome your "Star" ^_^
1、Clone
git clone https://github.com/micro-zoe/micro-app.git
2、Install dependencies
yarn bootstrap
3、Run project
yarn start
For more commands, see DEVELP
For browsers that do not support CustomElements, they can be compatible by introducing polyfills. For details, please refer to: webcomponents/polyfills。
However, Proxy is not compatible for the time being, so the micro-app cannot be run on browsers that do not support Proxy.
Browser compatibility can be viewed: Can I Use
The general is as follows:
If it is a development environment, you can set headers in webpack-dev-server to support cross-domain.
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
}
If it is a production environment, you can support cross-domain through Configuration nginx.
Yes, please see adapt vite for details.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。