快速上手微前端框架 icestark （一）

思考

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

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

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

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

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