① 輕量、高效、功能強大的微前端框架-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
到此這個簡單的微應用就搭好了
覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧
② 5分鍾看懂VUE項目
VUE是前端開發框架。誕生於2014年吧。
原始的前端開發框架需要工程師寫html、寫css、寫javascript(js)。js是腳本語言，瀏覽器可以運行js來執行一些js支持的動作，例如點擊反饋，下拉菜單、操作html的DOM元素之類。這樣開放效率就很低了。
後來誕生了一些前端開發框架，VUE就是其中之一。目前在國內前端開發中，特別是手機app的h5頁面的開發部分，被很多公司採用。
使用VUE開發的時候，不需要js直接操作html元素，只需要管理js的變數值，html會自動更新這些值。傳統的html配合js能完成的功能，VUE都給出了實現方案，開發只寫簡單的html和js語句就可以實現。
VUE開發的工具一般是visio stdio code（vscode），稍微適應兩天就可以熟練應用了。還是很強大的。
但是vscode本身只是編輯器，開發編譯類語言需要自己配編譯環境，具體我沒配過。
前端開發不需要配編譯環境了，只需要把需要的各種庫、工具在命令行界面安裝就行。具體過程網上搜「從零開始搭建vue項目」。
剛建立好的項目一定是下面這種目錄結構（ranktable.vue是我後加的
這對於新手村的人會引起頭暈嘔吐，老子啥都沒寫就出來這么多文件，不但數量不少，文件種類還齊全。
學習VUE別想一下吃的太多，除非你本身前端經驗豐富。否則先看懂紅色箭頭的幾個文件吧，看懂這幾個就算入門了。看的順序嚴格按照下面這樣。
index.html->main.js->App.vue->index.js->HelloWorld.vue
我將這幾個文件大概講一講，你就能有個清晰的脈絡了。
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tradedatapy</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
頁面開發當然是要有html了，VUE開發也不例外。這個html就是整個項目的入口了。只不過是<body>裡面過於簡單。<div id="app"></div>表示本html綁定了一個id為app的VUE對象。
二、main.js
new Vue({ //new Vue語句就是定義了一個VUE對象
el: '#app', //vue對象的id是app
router,
components: { App }, //vue的組件名是APP
template: '<App/>' //template 名是APP
})
這就定義了一個app的VUE對象，index.html就可以找到它了。
三、App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App' //export 了名為App的組件，main.js就可以找到它了
}
</script>
上面的template都理解為html的一部分片斷就行了，片斷可以拼接到html對應的位置，構成一個有內容的完整的頁面。<img src="./assets/logo.png">這句被我注釋了，否則頁面會顯示這個圖片的。下面的<route-view/>部分是路由，根據用戶的url不同，會路由到不同的vue文件，進而展示不同的頁面內容。
四、index.js
項目里有不只一個index.js，一定看準了，我要講解的是router目錄下的index.js.
//這里的配置決定了App.vue里<router-view/>位置會展示什麼內容
export default new Router({
routes: [
{
path: '/', //當用戶訪問 http://localhost:8080/ 根目錄也就是默認目錄會被路由到HelloWorld組件，
//這個組件的所有內容會被在App.vue里<router-view/>顯示出來
name: 'HelloWorld',
component: HelloWorld
},
{//當用戶訪問 http://localhost:8080/ranktable 會顯示ranktable.vue內容
//ranktable.vue是我後加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
五、HelloWorld.vue
最後看看這里有什麼
<template>
<div>
原來的內容被我刪除了，現在頁面顯示這句話。
</div>
</template>
<script>
</script>
vscode命令行執行npm run dev，看見下面說明成功了，將地址貼進瀏覽器
Compiled successfully in 983ms 15:43:26
I Your application is running here: http://localhost:8080
如果想要更復雜的功能，在helloworld.vue實現就行了，比如我要一個填表查詢功能，裡面改成
<template>
<div>
<group title="城市">
<selector placeholder="請選擇城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector>
</group>
<group title="街道">
<selector placeholder="請選擇街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector>
</group>
<group title="小區">
<selector placeholder="請選擇小區" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector>
</group>
<group title="日期">
<selector placeholder="請選擇日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector>
</group>
<group title="統計類型">
<selector placeholder="請選擇統計類型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector>
</group>
<div style="padding:15px;">
<x-button type="primary" @click.native="getValue('plainValueRef')">查詢</x-button>
</div>
</div>
</template>
<script>
import { Selector, Group, Cell, CellBox, XButton } from 'vux'
此處省略很多東西
</script>
這個例子有點復雜，需要下面<script>里實現很多內容，引入vux的一些組件，vux大家可以自行研究。效果是這樣的
③ 如何通俗地理解前端開發，它與後端開發有何聯系與不同
對於這個問題，我是這么理解的:前端開發面向用戶，後端開發面向機器。
前端開發理解和定位
如何理解和定位前端開發，最簡單的方法是從各大招聘網站上，查看各個公司對前端開發職位的崗位要求，就能清晰了解前端開發:前端開發主要負責圖形化類產品的研發、製作和升級，參與手機端和PC端的WEB產品、APP開發，根據產品需求開局兆發高質量前端頁面，積極探索前端開發技術的發展，優化用戶交互方式，提升用戶體驗。
前端開發主要技術
前端技術包括Javascript、CSS、XML、HTML5、JSON等，需要熟悉使用HTML和CSS進行頁面布局，掌握JQuery、Vue、React、Angular等框架或庫的技術原理和使用方法，前端開發也需要對不同設備及平台有一定了解，理解不同操作系統及瀏覽器的兼容性區別。
後端開發理解和定位
後端開發的工作職責主要包括參與業務系統需求分析、產品討論、系統架構設計、技術選型、產品研發、系統優化重構等。後端開發需要具有扎實的計算機科學功底、扎實的編程基礎，掌握常用的系統架構原理、搭建和優化方法，解決系統建設面臨的關鍵問題和技術難點。
後端開發主要技術
後端開發以設計開發高可用、高效率、高安全系統為目標，不局限於單一編程語言，主要技術包括分布式計算、中間件、資料庫、計算機網路、人工智慧、信息安全等方面技術，由於後端開發涉及面廣，後端開發人員最好具備一定的項目管理知識和經驗，有助於組織協調，推進項目開展。
前端開發與後端開發的聯系
如果將系統睜氏分為視圖-控制-模型三層，前端開發主要實現視圖層，後端開發實現控制和模型層。技術上都是桐早租運用分層、解藕、模塊化的思路提高開發集成效率、增強可維護行和可擴展性，近年來前端開發出現的Vue,React,Angular等框架大大推動了前端技術的發展，前端開發前途光明。
④ 前端Vue框架作用是什麼
簡潔高效方便的開發前端頁面，提升前端渲染性能，數據驅動，讓開發者將注意力集中在數據的渲染上而不是其他事情上
⑤ 微前端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：
⑥ qiankun 微前端應用實踐與部署（四）
一般情況下，我們對應用進行配置打包，要對圖片字體等資源進行下面配置，使得資源路徑正常載入。但是，在微前端模式下，子應用打包部署後，往往會出現子應用 css 文件裡面引入資源路徑載入失敗的問題，下面就讓我們來探究一下。
👉 獨立應用下的 url-loader 配置：
因為 url-loader 的 options 項的屬性 publicPath 屬性默認是 '' ，表示相對路徑，即打包出來的資源引用 url 都會加上相對路徑尋找 static 靜態資源入口，比如：
所有應用編譯打包部署後，當主應用載入子應用，子應用載入自身的 css 文件樣式時，由於 其對應的 css 文件裡面的圖片 url 引用是相對路徑，會出現子應用的資源相對路徑拼接主應用 domain 的情況，即子應用的 ../../static/img/bg_header.790a94f4.png 會在主應用的 domain 下進行資源的尋找，導致載入失敗 404 的情況。
如果項目有用到第三方庫，比如 element-ui ，那麼就更有必要進行處理了。因為 element-ui 的字體圖標是在 css 裡面引入的，還有相關背景圖片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生產模式情況下直接指定資源前綴，使之成為絕對路徑。
這樣配置後，打包出來的 css 樣式文件會變成：
資源是絕對路徑，就不會出現上面子應用資源載入失敗的情況。
但是，這種前端配置文件寫死路徑的做法靈活性並不好，比如不能做到編譯一次，任意部署，因為路徑寫死，所以如果需要部署到其他伺服器的話，就需要重新編譯了。
接下來，講的是實現靈活部署的方案。
我們在只編譯打包一次前端應用的前提下，為了實現靈活部署，需要藉助 nginx 來實現。
下面以 vue-cli 3 的配置為例，與 vue-cli 2 只是寫法上的區別，其他都一樣。
假設主應用部署地址是 192.168.2.192 ，子應用的部署地址是 192.168.2.192:7102 。
打包編譯部署後，子應用的 css 文件裡面的圖片資源引用 url 如下：
主應用載入子應用的時候，子應用的資源拼接主應用 domian 後，子應用的 css 文件裡面的圖片資源載入路徑 url 就會變成：
此時的關鍵就是要訪問到子應用的資源，而不是去主應用資源目錄去找。
所以我們採用 nginx 路徑代理轉發埠的方案，當應用訪問 192.168.2.192/live 這個路徑時，經過 nginx 進行路徑代理轉發配置，轉發到子應用埠。
配置 nginx 代理規則：
此時真正訪問的資源路徑（子應用資源路徑）是：
👋 至此，通過修改配置 url-loader 的 publicPath 以及配置 nginx 的路徑代理轉發，就可以實現編譯打包一次，到處部署的目的。
⑦ qianKun + VUE 實現微前端架構 (基於vue2實現)
創建兩個項目作為實現demo，一個為主應用，一個為子應用
3.配置函數文件 microAppSetting
4.微應用出口文件 index.js
5.在App.vue內配置微應用容器及跳轉菜單
6.在main.js文件內引入微應用出口文件 index.js
7.運行後展示
8.在配置完子應用後的主應用展示
點擊子應用菜單
1.修改子應用路由文件內路由實例屬性： base 為 "/child"
2.在main.js文件內導出生命周期鉤子
3.配置Webpack、跨域與埠號
在vue.config.js內添加：
4.運行後展示
package.json
⑧ 微前端quankun Vue應用 action+Vuex通信方式的實現
action + Vuex 通信主要是使用官方的 action 進行通信，之後再將值更新到 vuex 中
1、初始化 action
創建 src -> shared -> actions.js
2、在 Vue 組件中使用
1、把主應用中的初始化的action映射到微應用中
創建 src -> shared -> actions.js
2、在mounted的生命周期里注入actions實例
main.js
3、在 Vue 組件中使用
這樣就實現 action + Vuex 的通信方式。
主要還是開篇這句話：
action + Vuex 通信主要是使用官方的 action 進行通信，之後再將值更新到 vuex 中
主要參考文章：
乾坤官網通信API
微前端qiankun Vue應用間通信的思考
qiankun的簡單使用和通信