OneForAll框架搭建之旅:Vue + .NetCore WebApi(3)

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

前言

  項目使用了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註冊路由

  

結語

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章