完結(jié)篇:模塊聯(lián)邦實(shí)現(xiàn)微應(yīng)用
回憶一下之前幾篇內(nèi)容:
微前端框架 single-spa:創(chuàng)建微前端容器應(yīng)用。
創(chuàng)建基于 React 和 Vue 的微應(yīng)用
廣告 time:關(guān)注b站【西嶺老濕】,可查看微前端和 serverless 相關(guān)內(nèi)容的視頻講解版,配合食用,學(xué)得超快!還有更多有關(guān)前端的好東西。
1、基礎(chǔ)構(gòu)建-React
基礎(chǔ)應(yīng)用代碼安裝
基礎(chǔ)代碼:
2、基礎(chǔ)配置 webpack.config.js
package.json 啟動(dòng)命令:
3、導(dǎo)出微應(yīng)用
4、導(dǎo)入應(yīng)用模塊
在組件中使用
5、模塊聯(lián)邦實(shí)現(xiàn) Vue3.0 微前端架構(gòu)
完整代碼示例:modulefederationvue3: 基于模塊聯(lián)邦實(shí)現(xiàn)的 Vue3.0 微前端架構(gòu)示例 (gitee.com)
地址:https://gitee.com/xilinglaoshi1/modulefederationvue3
package.json
1)在 home 應(yīng)用中導(dǎo)出模塊
home\webpack.config.js
2) 在 layout 應(yīng)用中導(dǎo)入
layout\webpack.config.js
layout\src\views\About.vue
寫(xiě)好基礎(chǔ)代碼及對(duì)應(yīng)配置后,分別啟動(dòng) home 及 layout 兩個(gè)應(yīng)用項(xiàng)目就可以在 layout 應(yīng)用的 about 看到 home 應(yīng)用中的 User 組件的內(nèi)容了。
推薦閱讀:
恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。
點(diǎn)個(gè)“在看”和“贊”吧!
