㈠ 基於Vue3+TS+ElementPlus+Qiankun構建微應用項目
Hello 大家好，這里是Anyin。
最近打算把一個小型項目（小程序點餐系統）重構為微服務+微應用模式，前端的技術棧打算使用Vue3 + TS + ElementPlus + Qiankun 。這里記錄下我在構建基礎微應用的過程。
重構後的項目相關地址：
•後端： Anyin Cloud [1]
•前端基座： Anyin Cloud Parent[2]
•前端微應用： Anyin Cloud Base[3]
好了，接下來，我們來看看如何基於 Vue3+TS+ElementPlus+Qiankun 構建我們的微應用項目。
另外說下，這里為什麼不用 Vite 進行構建，原因是 Vite 目前結合 Qiankun 構建為應用還有點問題（采坑了），所以這里就放棄了。
首先，我們使用 vue-cli 創建一個parent項目:
接著，手動選擇我們要添加的組件：
我們選擇以下組件進行應用的構建，使用空格鍵進行多選，然後回車即可：
選擇vue3.x版本
相關代碼風格、路由模式都是使用默認，css編譯我們使用less：
相關編碼規范我們使用ESLint + Airbnb Config ：
最後，完整的選項如下：
當vue-cli幫我們創建好項目，我們進入項目查看下項目目錄，如下：
首先，Qiankun的主應用是需要安裝依賴的，微應用無需安裝依賴，修改配置即可。這里我們先在主應用安裝依賴
接著，進行相關微應用配置。我們新增一個 app.ts ，用於記錄所有的微應用的入口：
然後，注冊微應用，並導出start方法
導出 start 方法之後，需要在入口處執行該方法
對於整個界面，我們希望整體的布局是這個樣子的：
所以，我們在安裝 ElementPlus 之後，需要做這樣子的布局。
首先，安裝 ElementPlus
接著，在 main.ts 引入 ElementPlus 組件，如下:
然後，創建一個布局組件 Layout.vue ，如下：
最後，在App.vue注冊該組件
運行起來呈現的效果如下：
微應用的初始化項目同主應用，這里就不詳細說明。
微應用無需依賴 Qiankun ，這里我們做一些配置即可。
在 src 目錄下新增一個 public-path.js 文件，內容如下：
在 main.ts 引入該文件
新增一個路由配置文件，這里我們創建對應的路由信息，並且兼容獨立運行，內容如下：
接著，修改 main.ts 關於實例化的代碼，如下：
這里主要是定義個渲染的方法，然後暴露Vue實例，因為等下在微應用的生命周期的鉤子會使用到。
對於微應用還需要暴露生命周期的鉤子方法，這樣子主應用才能夠識別，在 main.ts 添加如下方法：
使用 vue 創建項目是沒有 vue.config.js 文件的，這里我們手動創建一個，並且配置相關詳細，代碼如下：
•這里我們導入了 package.json 的 name 欄位，因為這里需要和主應用配置的 app.ts 文件的 name 欄位一致 • headers 添加跨域配置，因為主應用是通過 fetch 方法來獲取微應用的資源的，而微應用是啟動在另外一個埠，所以需要添加跨域配置 • output 配置了微應用的打包格式，主應用才能正確識別微應用的一些配置
還記得我們以下這個圖不？
我認為 Header 應該是屬於主應用，而下面的 Aside 和 Main 都是屬於微應用， Aside 塊一般都是用於展示菜單，個人認為各個微應用應該各自維護自己的菜單，而不是交由主應用維護。
所以，在微應用，我們還需要處理下左側的菜單布局。
我們新增一個 Layout.vue 布局文件
至此，Vue3+TS+ElementPlus+Qiankun構建微應用項目的一個基本結構我們已經處理完成，整體運行看下效果：
首頁
微應用
好了，基於 Vue3+TS+ElementPlus+Qiankun 的微應用項目基本框架我們已經搭建好了，後續就是慢慢填充一些工具和頁面了。
相關源碼地址：
•主應用： Anyin Cloud Parent
•微應用： Anyin Cloud Base
[1] Anyin Cloud : https://gitee.com/anyin/anyin-cloud
[2] Anyin Cloud Parent: https://gitee.com/anyin/anyin-cloud-parent
[3] Anyin Cloud Base: https://gitee.com/anyin/anyin-cloud-base