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

心之所向，一往無前！
記錄開發過程當中的那些小事，給本身加點經驗值。

前言

 　　上篇《.netCore + Vue框架搭建之旅》前端篇：微前端架構設計》講了一下設計的核心思想，這篇主要說一下遠程加載模塊（動態加載js、css）。整個架構主要利用這個方式來實現，因此就單獨再抽出來記錄。

　　上篇講的是經過jquery來加載，在vue項目裏面貌似不太完美，因而就改爲經過Vue組件來加載模塊，同時增長NProgress顯示進度。

　　

nprogress安裝

npm install --save nprogress

  import NProgress from 'nprogress'

  import 'nprogress/nprogress.css'

　　

　　演示

　　

封裝RemoteMoudleLoader　

　1. 封裝模塊組件，暫時經過比對加載的文件數量肯定是否所有加載完成，完成後回調進度條的done()

　

　2. js和css加載的子組件就不單獨寫，直接經過render函數加載。監聽on的load方法，每一個文件下載完成後回調addCompleteCount方法進行疊加（暫時不論成功仍是失敗），最後經過watch監聽completeCount來判斷進度。

　

使用

　1. checkModel方法用來解析一級菜單Url的地址模式

　2. loadMoudle對Url發起請求，並將html傳給parsingHtml進行解析

　3. parsingHtml將文件路徑傳入組件，加載在文檔中就完成。

　

　

　

結語

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