思考

微前端設(shè)計理念是什么? 解決了什么問題?

微前端本質(zhì)和后端微服務(wù)理念是一樣的，微前端解決方案一般包含如下特點

• 在保證一個系統(tǒng)的操作體驗基礎(chǔ)上，實現(xiàn)各個微應(yīng)用的獨立開發(fā)和發(fā)版
• 不同子應(yīng)用統(tǒng)一管理
• 提供應(yīng)用間互相通信，跳轉(zhuǎn)頁面切換的能力

icestark 主應(yīng)用初始化

初始化 Vue 主應(yīng)用

npm init ice icestark-layout @vue-materials/icestark-layout-app

初始化 React 主應(yīng)用

npm init ice icestark-layout @icedesign/stark-layout-scaffold

本地實例初始化的 Vue 主應(yīng)用，運行如下

cd icestark-layout
npm install

# 注意 Vue 主應(yīng)用運行 `dev`
npm run dev
# React 主應(yīng)用運行 `start`
npm run start

本地地址：http://localhost:3000

main-app.png

本地運行的官方主應(yīng)用Demo,已經(jīng)整合了官方提供的 Vue,React 子應(yīng)用，接下來本地創(chuàng)建子應(yīng)用，運行后分別掛在到本地啟動的主應(yīng)用中

創(chuàng)建 icestark 子應(yīng)用

Vue 子應(yīng)用

npm init ice icestark-child-vue @vue-materials/icestark-child-app

運行 Vue 子應(yīng)用

cd icestark-child-vue
npm i
npm run dev

本地地址： http://localhost:3001

vue-child-app.png

React 子應(yīng)用

npm init ice icestark-child @icedesign/stark-child-scaffold

運行 React 子應(yīng)用

cd icestark-child
npm i
npm run start

本地地址： http://localhost:3333

react子應(yīng)用1.png

本地應(yīng)用整合

在主應(yīng)用中注冊子應(yīng)用，在主應(yīng)用 App.vue 中的 onMounted 中修改 ice 注冊配置，修改 name, activePath, title, entry 這四個屬性即可

app文件.png

注意 activePath 指向子應(yīng)用中的路由地址，entry 地址這里使用子應(yīng)用啟動后的根路由地址, 也可以指向?qū)?yīng)的子應(yīng)用指定地址, 如 http://localhost:3333/react

配置主應(yīng)用的側(cè)邊欄，指向?qū)?yīng)的子應(yīng)用

在主應(yīng)用的 BasicLayout.vue 文件中配置 el-sub-menu

layout.png

配置子應(yīng)用的路由

單獨配置子應(yīng)用路由對應(yīng)主應(yīng)用中的 activePath，實現(xiàn)正常加載

React 子應(yīng)用路由， 配置了一個 /react 路由地址

react-router.png

Vue 子應(yīng)用路由, 配置一個 /vue 路由地址

vue-router.png

刷新主應(yīng)用，側(cè)邊欄現(xiàn)在可以正常切換了

這時候主應(yīng)用的側(cè)邊欄的內(nèi)容對應(yīng)到本地啟動的子應(yīng)用，并且能訪問就整合成功了，這時候已經(jīng)本地示例實現(xiàn)了 icestark 框架的應(yīng)用整合，應(yīng)用接入，路由配置跳轉(zhuǎn)的能力。

接下來，將在本地示例中實現(xiàn)子應(yīng)用間的路由切換（頁面跳轉(zhuǎn)）和應(yīng)用互相通信。