微前端本质和后端微服务理念是一样的,微前端解决方案一般包含如下特点
初始化 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 子应用,接下来本地创建子应用,运行后分别挂在到本地启动的主应用中
Vue 子应用
npm init ice icestark-child-vue @vue-materials/icestark-child-app
cd icestark-child-vue
npm i
npm run dev
本地地址:http://localhost:3001
React 子应用
npm init ice icestark-child @icedesign/stark-child-scaffold
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 框架的应用整合,应用接入,路由配置跳转的能力。
接下来,将在本地示例中实现子应用间的路由切换(页面跳转)和应用互相通信。