⑴ 微前端——乾坤qiankun Demo
微前端就是將不同的功能按照不同的維度拆分成多個子應用。通過主應用來載入這些子應用。微前端的核心在於拆，拆完後在合！
我們可以將一個應用劃分成若干個子應用，將子應用打包成一個個的 lib 。當路徑切換 時載入不同的子應用。這樣每個子應用都是獨立的，技術棧也不用做限制了！從而解決了前端協同開發問題。
文檔地址： https://qiankun.umijs.org/zh
2018 年 Single-SPA 誕生了， single-spa 是一個用於前端微服務化的 JavaScript 前端解決方案 ( 本身沒有處理樣式隔離， js 執行隔離 ) 實現了路由劫持和應用載入。
2019 年 qiankun 基於 Single-SPA, 提供了更加開箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技術棧無關、並且接入簡單（像 i frame 一樣簡單）。
這里我們打算建立三個項目進行實操，一個Vue項目充當主應用，另一個Vue和React應用充當子應用
基座：qiankun-base 子應用：qiankun-vue、qiankun-react
react + react-router 技術棧的主應用：只需要讓子應用的 activeRule 包含主應用的這個路由即可。
vue + vue-router 技術棧的主應用:
用絕對路徑，不用用相對路徑，例如
qiankun 只能解決子項目之間的樣式相互污染，不能解決子項目的樣式污染主項目的樣式
沖突的樣式，採用BEM命名方式
子應用，需要增加 update 鉤子以便主應用手動更新微應用
主應用，直接調用子應用實例的 update 方法即可
⑵ 微前端前言
微前端是一種多個團隊通過獨立發布功能的方式來共同構建現代化 web 應用的技術手段及方法策略。
主框架不限制接入應用的技術棧，微應用具備完全自主權
微應用倉庫獨立，前後端可獨立開發，部署完成後主框架自動完成同步更新
在面對各種復雜場景時，我們通常很難對一個已經存在的系統做全量的技術棧升級或重構，而微前端是一種非常好的實施漸進式重構的手段和策略
每個微應用之間狀態隔離，運行時狀態不共享
微前端架構旨在解決單體應用在一個相對長的時間跨度下，由於參與的人員、團隊的增多、變遷，從一個普通應用演變成一個巨石應用後，隨之而來的應用不可維護的問題。這類問題在企業級 Web 應用中尤其常見。
1.url 不同步。瀏覽器刷新 iframe url 狀態丟失、後退前進按鈕無法使用。
2.UI 不同步，DOM 結構不共享。想像一下屏幕右下角 1/4 的 iframe 里來一個帶遮罩層的彈框，同時我們要求這個彈框要瀏覽器居中顯示，還要瀏覽器 resize 時自動居中。
3.全局上下文完全隔離，內存變數不共享。iframe 內外系統的通信、數據同步等需求，主應用的 cookie 要透傳到根域名都不同的子應用中實現免登效果。
4.慢。每次子應用進入都是一次瀏覽器上下文重建、資源重新載入的過程。
通過監聽 url change 事件，在路由變化時匹配到渲染的子應用並進行渲染，這個思路也是目前實現微前端的主流方式。同時single-spa要求子應用修改渲染邏輯並暴露出三個方法：bootstrap、mount、unmount，分別對應初始化、渲染和卸載，這也導致子應用需要對入口文件進行修改。過於基礎，成本太高，不建議。
qiankun是阿里推出的一個基於single-spa的微前端實現庫，旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。因為是基於single-spa進行封裝，所以single-spa的特點也被qiankun繼承下來。成本低於single-spa，高於MicroApp。
MicroApp是京東推出的一款基於類WebComponent進行渲染的微前端框架，不同於目前流行的開源框架，它從組件化的思維實現微前端，旨在降低上手難度、提升工作效率。它是目前市面上接入微前端成本最低的框架，並且提供了JS沙箱、樣式隔離、元素隔離、預載入、資源地址補全、插件系統、數據通信等一系列完善的功能。是目前市面上接入微前端成本最低的方案。
single-spa github地址： https://github.com/single-spa/single-spa
qiankun官網： https://qiankun.umijs.org/zh
MicroApp官網： https://cang.org/micro-app/
⑶ 微前端——Single-SPA（二）
1、新建一個html
2、新建一個single-spa-config.js
3、改造React入口文件
如此就完成了一個最基礎的例子
核心理念其實就是修改了react渲染的方式，採用了singleSpaReact去渲染，而後通過父項目中匹配路徑去掛載和卸載子模塊
⑷ 前端微服務設計
近些年，前端發展呈百家爭鳴式發展，框架層出不窮，版本更是迭代不窮，難免會出現前端項目技術棧不統一、所用框架版本不統一的情況。
如若某些項目，沒有新的功能加入，又能線上穩定運行，但其技術棧卻用的是 vue1.0，為了將其結合到新應用中去而對其重構，成本會很高。然而，微服務可以幫我們解決這個問題。
在既不重寫原有系統的基礎之下，又可以抽出人力來開發新的業務。其不僅僅對於業務人員來說是一個相當吸引力的特性，對於技術人員來說，不重寫舊的業務，能在一些新技術上做挑戰，也是一件很有意思的事情。
除此之外，在這兩三年裡，移動應用出現了一種趨勢，用戶不想裝那麼多應用。而往往一家大的商業公司，會提供一系列的應用。這些應用也從某種程度上，反應了這家公司的組織架構。然而，在用戶的眼裡他們就是一家公司，他們就只應該有一個產品。相似的，這種趨勢也在桌面 Web 出現。聚合成為了一個技術趨勢，體現在前端的聚合就是微服務化架構。
理想的前端微服務化，應該是符合如下幾個特點：
路由分發式微前端，即通過設置路由，將不同的業務分發到不同的、獨立前端應用上。其通常可以通過 HTTP 伺服器的反向代理來實現，又或者是應用框架自帶的路由來解決。
就當前而言，通過路由分發式的微前端架構應該是採用最多、最易採用的 「微前端」 方案。但是這種方式看上去更像是多個前端應用的聚合，即我們只是將這些不同的前端應用拼湊到一起，使他們看起來像是一個完整的整體。但是，它們並不是一個完整的整體，每次用戶從 A 應用到 B 應用的時候，往往需要刷新一下頁面。
通常可通過 nginx 配置反向代理，來進行路由分發，從而實現前端微服務。
它適用於以下場景：
iframe 可以創建一個全新的獨立的宿主環境，這意味著我們的前端應用之間可以相互獨立運行。
採用 iframe 有幾個重要的前提：
即何時載入、卸載應用，如何監聽應用事件等。
不論是基於 Web Components 的 Angular，或者是 VirtualDOM 的 React 等，現有的前端框架都離不開基本的 HTML 元素 DOM。
那麼，我們只需要：
第一個問題，創建 DOM 是一個容易解決的問題。而第二個問題，則一點兒不容易，特別是移除 DOM 和相應應用的監聽。當我們擁有一個不同的技術棧時，我們就需要有針對性設計出一套這樣的邏輯。現有的框架有single-spa、qiankun、mooa等
常見的方式有：
其次，採用這種方式還有一個限制，那就是：規范！ 規范！ 規范！。在採用這種方案時，我們需要：
Web Components 組件可以擁有自己獨立的 Scripts 和 Styles，以及對應的用於單獨部署組件的域名。然而它並沒有想像中的那麼美好，要直接使用純 Web Components 來構建前端應用的難度有：
現有的微前端框架有single-spa、qiankun、mooa。其均是在前端框架之上設計通訊、載入機制來實現的。
⑸ 前端布局的幾種方式
1.固定布局，靜態布局
傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位，網頁寬度一般為960px。網頁布局始終按照最初寫代碼時的布局來顯示，不受瀏覽器影響。如果瀏覽器寬度如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景
2.流式布局
流式布局使用的是百分比，這位網頁提供了很強的可塑性和流動性，與固定寬度布局基本不同點 就在於對網站尺寸的側量單位不同。屏幕解析度變化時，頁面里元素的大小會變化而但布局不變，這可能導致如果屏幕太大或者太小都會導致元素無法正常顯示。
3.自適應布局
自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式，例如寬度960px是一種樣式，網頁寬度1440px是另一種樣式。改變屏幕解析度可以切換不同的靜態局部，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。
4.彈性布局
使用em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。這種布局中包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位。默認的文字大小16px就是1em。
5.響應式布局
每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變，設計方法通常採用了媒體查詢+流式布局，使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
⑹ 微前端qiankun
微前端qiankun 使用，一些注意事項。附上 qiankun官網
主應用(vue)
1、安裝qiankun
2、修改 main.js
主應用到這就可以了，下面的是一些擴展載入微應用事項
3、router頁面配置載入微應用
修改主應用router.js
在About.vue文件中加入
4、如果在vue-admin模板中使用乾坤，需要注意的是：
<div id="container"></div> 不能寫在頁面中，只能寫在Appmain.vue 中，
路由需要配置重定向
判斷改變路由（這里可寫配置文件，偷懶就寫死了）
AppMain.vue,需要判斷顯示的是哪個微應用，改變其id顯示
微應用（vue）
1、在 src 目錄新增 public-path.js：
2、 main.js 修改。
3、打包配置修改（vue.config.js）：
微應用（react）
1、在 src 目錄新增 public-path.js：
2、設置 history 模式路由的 base：
3、 index.js 修改
4、webpack 配置
安裝插件 @rescripts/cli。
根目錄新增 .rescriptsrc.js：
修改 package.json：
⑺ 前端幾種常見的布局方式
1.靜態布局（固定寬高）
2.彈性布局（flex）————常用
3.聖杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/負數/一個長度或百分比/兩個非負數/一個非負數和一個長度或百分比等
A，flex-group：當父元素有剩餘空間時，子元素占據剩餘空間的量
B，flex-shrink：當父元素的空間不足以展示所有的子元素，父元素沒設置flex-wrap，子元素需要進行收縮的量
C，flex-basis：表示該子元素的初始寬度
4.自適應布局（為不同的屏幕解析度定義的布局 @media媒體查詢技術）
5.流式布局：（寬高用百分比，按屏幕解析度調整，布局不發生變化）
6.響應式布局（使用meta標簽，寬高隨窗口調整自動適配，適應布局和流式布局的綜合方式）
7.柵格布局
1）.柵格(網格劃分)：在一個特定區域內劃分出有規律的格子，依靠這些格子進行有規律的版面布局。
使用柵格布局：bootstrap（12列），element（24欄），antDesign
2）.柵格布局
container：柵格系統容器；rows：行；cols：列；gutters：各列間的空隙
3）.柵格布局實現響應式布局
8.table布局（使用表格進行頁面排版和樣式設置）
1）.用法
display:table
display:table-cell，相當於td元素
display:table-row，相當於tr元素
table-layout:fixed | auto(默認)：table-layout 屬性用於顯示表格單元格、行、列；auto, 自動表格布局，列的寬度由單元格中最大內容的寬度決 定；fixed ,固定表格布局。
⑻ 快速上手微前端框架 icestark （一）
微前端本質和後端微服務理念是一樣的，微前端解決方案一般包含如下特點
初始化 Vue 主應用
初始化 React 主應用
本地實例初始化的 Vue 主應用，運行如下
本地地址： http://localhost:3000
本地運行的官方主應用Demo,已經整合了官方提供的 Vue,React 子應用，接下來本地創建子應用，運行後分別掛在到本地啟動的主應用中
Vue 子應用
本地地址： http://localhost:3001
React 子應用
本地地址： http://localhost:3333
在主應用中注冊子應用，在主應用 App.vue 中的 onMounted 中修改 ice 注冊配置，修改 name, activePath, title, entry 這四個屬性即可
注意 activePath 指向子應用中的路由地址， entry 地址這里使用子應用啟動後的根路由地址, 也可以指向對應的子應用指定地址, 如 http://localhost:3333/react
在主應用的 BasicLayout.vue 文件中配置 el-sub-menu
單獨配置子應用路由對應主應用中的 activePath ，實現正常載入
React 子應用路由， 配置了一個 /react 路由地址
Vue 子應用路由, 配置一個 /vue 路由地址
這時候主應用的側邊欄的內容對應到本地啟動的子應用，並且能訪問就整合成功了，這時候已經本地示例實現了 icestark 框架的應用整合，應用接入，路由配置跳轉的能力。
接下來，將在本地示例中實現子應用間的路由切換（頁面跳轉）和應用互相通信。
⑼ 輕量、高效、功能強大的微前端框架-MicroApp
這幾年後端的微服務是比較火爆，我們公司目前只要是新項目，基本上都是基於微服務去架構的，那麼微前端是什麼呢？
微前端是借鑒了微服務的架構理念，核心在於將一個龐大的前端應用拆分成多個獨立靈活的小型應用，每個應用都可以獨立開發、獨立運行、獨立部署，再將這些小型應用融合為一個完整的應用，或者將原本運行已久、沒有關聯的幾個應用融合為一個應用。微前端既可以將多個項目融合為一，又可以減少項目之間的耦合，提升項目擴展性，相比一整塊的前端倉庫，微前端架構下的前端倉庫傾向於更小更靈活
以前我們為了把幾個獨立運行的小型應用合並成一個應用都是通過iframe的方式去實現的，如果不考慮體驗問題，iframe 幾乎是最完美的微前端解決方案了。
iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案，不論是樣式隔離、js 隔離這類問題統統都能被完美解決。但他的最大問題也在於他的隔離性無法被突破，導致應用間上下文無法被共享，隨之帶來的開發體驗、產品體驗的問題
micro-app不是基於iframe架構的
micro-app提供了js沙箱、樣式隔離、元素隔離、預載入、數據通信、靜態資源補全等一系列完善的開箱即用功能
micro-app沒有任何依賴
為了保證各個業務之間獨立開發、獨立部署的能力，micro-app做了諸多兼容，在任何技術框架中都可以正常運行。
下面我講一下如何在Vue中使用micro-app
1、初始化一個基座應用
2、基座應用的文件修改
main.js修改
router.js修改
3、main-page.vue頁面
4、創建一個子應用
5、子應用的router.js文件修改
6、src目錄下新建 public-path.js
7、 main.js 引入public-path.js
到此這個簡單的微應用就搭好了
覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧
⑽ qiankun微前端框架處理
https://blog.csdn.net/qq_41694291/article/details/113842872
概念：微前端的概念借鑒於後端的微服務，一般以業務功能為拆分單元
解決問題：大型項目的變更、擴展、維護困難的問題
總體積變大，插件可上傳cdn，但公共函數資源不便於共享
iframe ：隔離性和兼容性好，性能和使用感差（性能差因為不會有緩存，每次重新載入）
基座模式 ：基於 路由分發 ，由基座監聽路由變化，載入不同的應用，實現應用解耦，single-spa、qiankun
組合式集成 ：組件單獨打包發布，類似於npm包
EMP ：主要基於Webpack5 Mole Federation
web components ：
我們採用的是qiankun，主要思路是將一個大應用，拆分為更小的、可獨立開發、測試、部署的子應用。
傳統的大型項目：所有模塊都在一個應用里，由應用本身負責路由管理，屬於 應用分發路由 方式
拆分微應用的項目：屬於基座模式下的系統架構，各應用互相獨立，單獨運行在不同的服務上，基座（基座一般是用戶最終訪問的應用）根據路由去載入不同的應用到頁面上，即 路由分發應用 方式
微前段主要需要解決的問題有兩個
qiankun和single-spa對比
activePath與當前的hash對比一致