快速上手微前端框架 icestark (一)

1,786 阅读2分钟

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

思考

微前端设计理念是什么? 解决了什么问题?

微前端本质和后端微服务理念是一样的,微前端解决方案一般包含如下特点

  • 在保证一个系统的操作体验基础上,实现各个微应用的独立开发和发版
  • 不同子应用统一管理
  • 提供应用间互相通信,跳转页面切换的能力

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 框架的应用整合,应用接入,路由配置跳转的能力。

接下来,将在本地示例中实现子应用间的路由切换(页面跳转)和应用互相通信。