心之所向，勇往直前！
記錄開發程序中的那些小事，給自己加點經驗值，
前言
上篇《.netCore + Vue框架搭建之旅》前端篇：微前端架構設計》講了一下設計的核心思想，這篇主要說一下遠程加載模塊（動態加載js、css），整個架構主要利用這個方式來實作，所以就單獨再抽出來記錄，
上篇講的是通過jquery來加載，在vue專案里面貌似不太完美，于是就改成通過Vue組件來加載模塊，同時增加NProgress顯示進度，
nprogress安裝
npm install --save nprogressimport 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將檔案路徑傳入組件，加載在檔案中就完成，
結語
本篇到此結束，如果有任何疑問或者指正，請發表在評論區，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/8430.html
標籤：架構設計
下一篇：SpringMVC的作業原理