思考
微前端设计理念是什么? 解决了什么问题?
微前端本质和后端微服务理念是一样的，微前端解决方案一般包含如下特点
- 在保证一个系统的操作体验基础上，实现各个微应用的独立开发和发版
- 不同子应用统一管理
- 提供应用间互相通信，跳转页面切换的能力
icestark 主应用初始化
初始化 Vue 主应用
npm init ice icestark-layout @vue-materials/icestark-layout-app
初始化 React 主应用
npm init ice icestark-layout @icedesign/stark-layout-scaffold
本地实例初始化的 Vue 主应用，运行如下
cd icestark-layout npm install # 注意 Vue 主应用运行 `dev` npm run dev # React 主应用运行 `start` npm run start
本地地址：http://localhost:3000
本地运行的官方主应用Demo,已经整合了官方提供的 Vue,React 子应用，接下来本地创建子应用，运行后分别挂在到本地启动的主应用中
创建 icestark 子应用
Vue 子应用
npm init ice icestark-child-vue @vue-materials/icestark-child-app
运行 Vue 子应用
cd icestark-child-vue npm i npm run dev
本地地址：http://localhost:3001
React 子应用
npm init ice icestark-child @icedesign/stark-child-scaffold
运行 React 子应用
cd icestark-child npm i npm run start
本地地址：http://localhost:3333
react-micro-app.png
本地应用整合
在主应用中注册子应用，在主应用 App.vue 中的 onMounted 中修改 ice 注册配置，修改 name, activePath, title, entry 这四个属性即可
app文件.png
注意activePath 指向子应用中的路由地址，entry 地址这里使用子应用启动后的根路由地址, 也可以指向对应的子应用指定地址, 如 http://localhost:3333/react
配置主应用的侧边栏，指向对应的子应用
在主应用的 BasicLayout.vue 文件中配置 el-sub-menu
layout.png
配置子应用的路由
单独配置子应用路由对应主应用中的 activePath，实现正常加载
React 子应用路由， 配置了一个 /react 路由地址
react-router.png
Vue 子应用路由, 配置一个 /vue 路由地址
vue-router.png
刷新主应用，侧边栏现在可以正常切换了
这时候主应用的侧边栏的内容对应到本地启动的子应用，并且能访问就整合成功了，这时候已经本地示例实现了 icestark 框架的应用整合，应用接入，路由配置跳转的能力。
接下来，将在本地示例中实现子应用间的路由切换（页面跳转）和应用互相通信。
