前端微服務化解決方案4-新模組構建

bybailiang發表於2020-12-14

將程式碼部署完畢後,我們就需要建立一個新的模組來實現程式碼

建立方法

TIP

  • 建立新模組時,我們需要按照生產情況建立。切勿造成模組冗餘和雜亂。
  • 模組的生成需要嚴格按照指令執行,不能自己杜撰,不能傳空,否則工程構建會找不到路徑而汙染舊有模組。

執行指令

# 建立模組程式碼指令
npm run new

隨後在視窗中會出現如下程式碼,代表正在進行初始化操作

> vue-module-pro @1.0.9 new ${專案路徑}
> plop

執行完畢後,按照下面的指令輸入相關資源名稱

? 請輸入工程名稱:
​
? 是否需要生成專案公共頭?(y/N)
​
? 是否使用VantUI元件?(y/N)
​
? 請輸入後端地址:
​
? 請輸入前端執行埠(例如:8080):

按照順序執行以上命令後,就可以自動生成一個新的模組,展示如下成功介面。

TIP
新的微模組含有基礎頁面和必須元件,能夠直接支援啟動和打包。

如何進行模組劃分

明確這個問題首先要了解本工程的實現機制

工程通過分模組的方式實現了前端微服務化,也就是說工程並沒有強制規定同學們對模組的定義。示例:

  • 可以將一個頁面作為一個模組;

  • 可以按照業務進行模組劃分,一個業務分管一個模組;

  • 可以按照產品進行劃分,一個模組代表一個產品;

按照實際生產可以在工程裡建立N個模組,模組可以呼叫一個或多個後端。

src下面的每一個資料夾(除了comm)分別代表了每一個模組的模組名稱,對應一個頁面/業務/產品。

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章