micro-app-demo 作为 micro-app 的案例仓库，举例了 react, vue, angular, nextjs, nuxtjs, vite 如何作为主应用和子应用接入微前端，并在尽可能改动少量的代码的情况下做出尽可能完善的功能。
micro-app-demo中所有项目都是使用官方脚手架创建的，它们足够精简，你完全可以将其中的demo作为基础进一步开发自己的项目。
线上地址： http://www.micro-zoe.com/main-vue2/
.
├── child_apps
│ ├── angular11 // 子应用 angular11 (history路由)
│ ├── nextjs11 // 子应用 nextjs11 (history路由)
│ ├── nuxtjs2 // 子应用 nuxtjs2 (history路由)
│ ├── react16 // 子应用 react16 (history路由)
│ ├── react17 // 子应用 react17 (hash路由)
│ ├── sidebar // 子应用 sidebar，公共侧边栏
│ ├── vite-vue3 // 子应用 vite (hash路由)
│ ├── vue2 // 子应用 vue2 (history路由)
│ └── vue3 // 子应用 vue3 (history路由)
├── main_apps
│ ├── angular11 // 主应用 angular11 (history路由)
│ ├── nextjs11 // 主应用 nextjs11 (history路由)
│ ├── nuxtjs2 // 主应用 nuxtjs2 (history路由)
│ ├── react16 // 主应用 react16 (history路由)
│ ├── react17 // 主应用 react17 (history路由)
│ ├── vite-vue3 // 主应用 vite (history路由)
│ ├── vue2 // 主应用 vue2 (history路由)
│ └── vue3 // 主应用 vue3 (history路由)
├── package.json
└── yarn.lock
19 directories, 5 files
yarn bootstrap如果失败，建议单独进入子目录执行yarn安装。
各主应用都监听了3000端口，所以只能同时启动一个主应用，而子应用端口各不相同，可以同时启动。
1、启动 react16 主应用
yarn dev:main-react16访问：http://localhost:3000/main-react16
此时分别运行 main_apps/react16 以及 child_apps 文件夹下的所有子应用。
2、启动 react17 主应用
yarn dev:main-react17访问：http://localhost:3000/main-react17
此时分别运行 main_apps/react17 以及 child_apps 文件夹下的所有子应用。
3、启动 vue2 主应用
yarn dev:main-vue2访问：http://localhost:3000/main-vue2
此时分别运行 main_apps/vue2 以及 child_apps 文件夹下的所有子应用。
4、启动 vue3 主应用
yarn dev:main-vue3访问：http://localhost:3000/main-vue3
此时分别运行 main_apps/vue3 以及 child_apps 文件夹下的所有子应用。
5、启动 vite 主应用
yarn dev:main-vite访问：http://localhost:3000/main-vite
此时分别运行 main_apps/vite-vue3 以及 child_apps 文件夹下的所有子应用。
6、启动 angular11 主应用
yarn dev:main-angular11访问：http://localhost:3000/main-angular11
此时分别运行 main_apps/angular11 以及 child_apps 文件夹下的所有子应用。
7、启动 nextjs11 主应用
yarn dev:main-nextjs11访问：http://localhost:3000/
此时分别运行 main_apps/nextjs11 以及 child_apps 文件夹下的所有子应用。
8、启动 nuxtjs2 主应用
yarn dev:main-nuxtjs2访问：http://localhost:3000/
此时分别运行 main_apps/nuxtjs2 以及 child_apps 文件夹下的所有子应用。
- 1、如果你在安装依赖或启动项目时发生错误，可以尝试单独进入每个项目执行操作。
- 2、因为每个主应用都有侧边栏，一次次写太麻烦，所以将侧边栏单独分离出来作为子应用，也就是
child-sidebar，实际项目中不需要这样做，侧边栏一般放到主应用中。 - 3、因为nextjs和nuxtjs的基础路由是写死的，而child-nextjs11，child-nuxtjs2分别嵌入了多个主应用，每个主应用下的基础路由都不同，所以单独为每个主应用单独打包构建不同版本（main_apps/nextjs11, main_apps/nuxtjs2略微不同，它们单独绑定了端口，处于根目录，可以共用一个版本）。