《.netCore + Vue框架搭建之旅》前端篇：微前端架構設計

心之所向，勇往直前！
記錄開發過程中的那些小事，給自己加點經驗值。

前言

　　項目使用了Vue cli3.0+作為基礎架構，這個版本和2.0的有一些不同。具體參考：

　　1. 《vue cli3.0快速搭建項目詳解》

　　2. 《vue-cli2.0與vue-cli3.0》

　　環境

　　

　　依賴

    

 

　　演示

思路：先加載頂部一級菜單，當用戶點擊時觸發請求，加載模塊。等待模塊加載完成后，加載二級菜單。這時候所有組件已經注冊完成，用戶點擊菜單，根據固定好的路由配置，進入對應的模塊子頁面。

架構

　　微前端的優點淺顯點理解就是獨立開發和部署、靈活配置、擴展性強。在以前開發的時候，所有的功能都放在同一個項目下，不僅造成體積越來越大（啟動慢），而且后面接手的人往往需要花費很多時間去閱讀代碼后才能繼續開發，造成很大的損耗。

　　現在，一切都變得很簡單！

　常見方案

1. ifreame：簡單易實現，但冗余html而且對SEO不友好
2. WebComponents: 基本能實現功能，但兼容性不太行就沒有仔細去琢磨

在這里框架中我采用的以Vue為核心實現模塊化加載。

核心思路

　　主要根據菜單地址發起Http請求拿到子模塊的index.html。這個入口文件記錄了模塊需要用到的css和js文件相對路徑。然后通過正則表達式解析出script標簽、style標簽。最后將標簽加載到主頁的最底部，完成子模塊的加載。

　　子模塊擁有自己獨立的領域邏輯，組件，api接口文件（為了避免沖突，要規范命名）。

　　如圖：

　　

 

路由裝載

　　1. 自動注冊子路由。

　　通過require.context獲取views目錄文件路徑集合，然后解析.vue文件，根據目錄名 + 組件名生成的名稱作為路由的name注冊到主路由。

　　

　　

　　2. 在main.js入口中暴露全局變量到window對象下，給子模塊進行引用。registerChildRoutes方法用於子模塊把自己的路由注冊到主路由。

　　

　　3. 子模塊main.js注冊路由

　　

結語

　　本篇到此結束，如果有任何疑問或者指正，請發表在評論區。