\n\nEnglish｜[简体中文](./README.zh-cn.md)｜[Documentation](https://jd-opensource.github.io/micro-app/)｜[Discussions](https://github.com/jd-opensource/micro-app/discussions)｜[WeChat](./Contact.md)\n\n# 📖Introduction\nmicro-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. \n\nIt 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.\n\nmicro-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.\n\n# How to use\n## Base application\n**1、Install**\n```bash\nyarn add @micro-zoe/micro-app\n```\n\n**2、import at the entrance**\n```js\n// main.js\nimport microApp from '@micro-zoe/micro-app'\n\nmicroApp.start()\n```\n\n**3、Use components in page**\n```html\n\n\n \n \n\n```\n\n## Sub application\n**Set cross-domain support in the headers of webpack-dev-server**\n```js\ndevServer: {\n headers: {\n 'Access-Control-Allow-Origin': '*',\n },\n},\n```\n\nThe above micro front-end rendering is completed, and the effect is as follows:\n\n\n\nMore detailed configuration can be viewed [Documentation](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/start).\n\n# 🤝 Contribution\nIf you're interested in this project, you're welcome to mention pull request, and also welcome your \"Star\" ^_^\n\n### development\n1、Clone\n```\ngit clone https://github.com/jd-opensource/micro-app.git\n```\n\n2、Install dependencies\n```\nyarn bootstrap\n```\n\n3、Run project\n```\nyarn start\n```\n\nFor more commands, see [DEVELOP](https://github.com/jd-opensource/micro-app/blob/master/DEVELOP.md)\n\n# FAQ\n\n\n What are the advantages of micro-app?\n It is easy to use and low invasive. It only needs to change a small amount of code to access the micro front-end, and provides rich functions at the same time.\n\n\n\n How compatible?\n The micro-app relies on two newer APIs, CustomElements and Proxy.\n\n For browsers that do not support CustomElements, they can be compatible by introducing polyfills. For details, please refer to: [webcomponents/polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)。\n\n However, Proxy is not compatible for the time being, so the micro-app cannot be run on browsers that do not support Proxy.\n\n Browser compatibility can be viewed: [Can I Use](https://caniuse.com/?search=Proxy)\n\n The general is as follows:\n - desktop: Except IE browser, other browsers are basically compatible.\n - mobile: ios10+、android5+\n\n\n\n Must micro applications support cross-domain?\n yes!\n\n If it is a development environment, you can set headers in webpack-dev-server to support cross-domain.\n\n ```js\n devServer: {\n headers: {\n 'Access-Control-Allow-Origin': '*',\n },\n }\n ```\n\n If it is a production environment, you can support cross-domain through [Configuration nginx](https://segmentfault.com/a/1190000012550346).\n\n\n\n\n Does it support vite?\n \n Yes, please see [adapt vite](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/vite) for details.\n\n\n\n Does it support ssr?\n \n Yes, please see [nextjs](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/nextjs), [nuxtjs](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/nuxtjs) for details.\n\n\n# Contributors\n\n \n\n\n# License\n[MIT License](https://github.com/jd-opensource/micro-app/blob/master/LICENSE)","users":{}}
![\"logo\"](\"https://jd-opensource.github.io/micro-app/home/assets/logo.png\"){kind=logo}
\n \n![\"version\"/](\"https://img.shields.io/npm/v/@micro-zoe/micro-app.svg\")
\n \n \n ![\"downloads\"/](\"https://img.shields.io/npm/dt/@micro-zoe/micro-app.svg\")
\n \n \n ![\"license\"/](\"https://img.shields.io/npm/l/@micro-zoe/micro-app.svg\")
\n \n \n ![\"WeChat\"](\"https://img.shields.io/badge/chat-wechat-blue\"){kind=icon}
![\"travis\"/](\"https://api.travis-ci.com/jd-opensource/micro-app.svg?branch=master\")
\n \n \n ![\"coveralls\"/](\"https://coveralls.io/repos/github/jd-opensource/micro-app/badge.svg?branch=master\"){kind=icon}
\n \n