《.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註冊路由

　　

結語

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