{"id":23392686,"url":"https://github.com/jd-opensource/micro-app-demo","last_synced_at":"2025-05-16T11:03:49.080Z","repository":{"id":37681195,"uuid":"395245307","full_name":"jd-opensource/micro-app-demo","owner":"jd-opensource","description":"micro-app 案例","archived":false,"fork":false,"pushed_at":"2025-02-05T07:01:07.000Z","size":4707,"stargazers_count":239,"open_issues_count":33,"forks_count":128,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-27T20:47:35.085Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jd-opensource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-12T08:14:33.000Z","updated_at":"2025-04-16T05:52:41.000Z","dependencies_parsed_at":"2023-11-17T12:28:55.707Z","dependency_job_id":"41a282fc-701b-4e96-ad2f-f7b863d7c2d8","html_url":"https://github.com/jd-opensource/micro-app-demo","commit_stats":null,"previous_names":["jd-opensource/micro-app-demo","micro-zoe/micro-app-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fmicro-app-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fmicro-app-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fmicro-app-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fmicro-app-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jd-opensource","download_url":"https://codeload.github.com/jd-opensource/micro-app-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-22T05:11:31.106Z","updated_at":"2025-05-16T11:03:49.060Z","avatar_url":"https://github.com/jd-opensource.png","language":"JavaScript","readme":"# 简介\nmicro-app-demo 作为 [micro-app](https://github.com/micro-zoe/micro-app) 的案例仓库，举例了 `react`, `vue`, `angular`, `nextjs`, `nuxtjs`, `vite` 如何作为主应用和子应用接入微前端，并在尽可能改动少量的代码的情况下做出尽可能完善的功能。\n\nmicro-app-demo中所有项目都是使用官方脚手架创建的，它们足够精简，你完全可以将其中的demo作为基础进一步开发自己的项目。\n\n\n# 目录结构\n```\n.\n├── child_apps\n│   ├── angular11        // 子应用 angular11 (history路由)\n│   ├── nextjs11         // 子应用 nextjs11 (history路由)\n│   ├── nuxtjs2          // 子应用 nuxtjs2 (history路由) \n│   ├── react16          // 子应用 react16 (history路由)\n│   ├── react17          // 子应用 react17 (hash路由)\n│   ├── sidebar          // 子应用 sidebar，公共侧边栏\n│   ├── vite-vue3        // 子应用 vite (hash路由)\n│   ├── vue2             // 子应用 vue2 (history路由)\n│   └── vue3             // 子应用 vue3 (history路由)\n├── main_apps\n│   ├── angular11        // 主应用 angular11 (history路由)\n│   ├── nextjs11         // 主应用 nextjs11 (history路由)\n│   ├── nuxtjs2          // 主应用 nuxtjs2 (history路由)\n│   ├── react16          // 主应用 react16 (history路由)\n│   ├── react17          // 主应用 react17 (history路由)\n│   ├── vite-vue3        // 主应用 vite (history路由)\n│   ├── vue2             // 主应用 vue2 (history路由)\n│   └── vue3             // 主应用 vue3 (history路由)\n├── package.json\n└── yarn.lock\n\n19 directories, 5 files\n```\n\n# 开始\n\n## 1、安装依赖\n\n```bash\nyarn bootstrap\n```\n\n如果失败，建议单独进入子目录执行`yarn`安装。\n\n\n## 2、运行项目\n各主应用都监听了3000端口，所以只能同时启动一个主应用，而子应用端口各不相同，可以同时启动。\n\n**1、启动 react16 主应用**\n\n```bash\nyarn dev:main-react16\n```\n\n访问：`http://localhost:3000/main-react16`\n\n此时分别运行 `main_apps/react16` 以及 `child_apps` 文件夹下的所有子应用。\n\n**2、启动 react17 主应用**\n\n```bash\nyarn dev:main-react17\n```\n\n访问：`http://localhost:3000/main-react17`\n\n此时分别运行 `main_apps/react17` 以及 `child_apps` 文件夹下的所有子应用。\n\n**3、启动 vue2 主应用**\n\n```bash\nyarn dev:main-vue2\n```\n\n访问：`http://localhost:3000/main-vue2`\n\n此时分别运行 `main_apps/vue2` 以及 `child_apps` 文件夹下的所有子应用。\n\n**4、启动 vue3 主应用**\n\n```bash\nyarn dev:main-vue3\n```\n\n访问：`http://localhost:3000/main-vue3`\n\n此时分别运行 `main_apps/vue3` 以及 `child_apps` 文件夹下的所有子应用。\n\n\n**5、启动 vite 主应用**\n\n```bash\nyarn dev:main-vite\n```\n\n访问：`http://localhost:3000/main-vite`\n\n此时分别运行 `main_apps/vite-vue3` 以及 `child_apps` 文件夹下的所有子应用。\n\n\n**6、启动 angular11 主应用**\n\n```bash\nyarn dev:main-angular11\n```\n\n访问：`http://localhost:3000/main-angular11`\n\n此时分别运行 `main_apps/angular11` 以及 `child_apps` 文件夹下的所有子应用。\n\n\n\n**7、启动 nextjs11 主应用**\n\n```bash\nyarn dev:main-nextjs11\n```\n\n访问：`http://localhost:3000/`\n\n此时分别运行 `main_apps/nextjs11` 以及 `child_apps` 文件夹下的所有子应用。\n\n**8、启动 nuxtjs2 主应用**\n\n```bash\nyarn dev:main-nuxtjs2\n```\n\n访问：`http://localhost:3000/`\n\n此时分别运行 `main_apps/nuxtjs2` 以及 `child_apps` 文件夹下的所有子应用。\n\n## 效果如下：\n![](./example.png)\n\n\n# 补充\n- 1、如果你在安装依赖或启动项目时发生错误，可以尝试单独进入每个项目执行操作。\n- 2、因为每个主应用都有侧边栏，一次次写太麻烦，所以将侧边栏单独分离出来作为子应用，也就是 `child-sidebar`，实际项目中不需要这样做，侧边栏一般放到主应用中。\n- 3、因为nextjs和nuxtjs的基础路由是写死的，而child-nextjs11，child-nuxtjs2分别嵌入了多个主应用，每个主应用下的基础路由都不同，所以单独为每个主应用单独打包构建不同版本（main_apps/nextjs11, main_apps/nuxtjs2略微不同，它们单独绑定了端口，处于根目录，可以共用一个版本）。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd-opensource%2Fmicro-app-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjd-opensource%2Fmicro-app-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd-opensource%2Fmicro-app-demo/lists"}