將程式碼部署完畢後,我們就需要建立一個新的模組來實現程式碼
建立方法
TIP
- 建立新模組時,我們需要按照生產情況建立。切勿造成模組冗餘和雜亂。
- 模組的生成需要嚴格按照指令執行,不能自己杜撰,不能傳空,否則工程構建會找不到路徑而汙染舊有模組。
執行指令
# 建立模組程式碼指令
npm run new
隨後在視窗中會出現如下程式碼,代表正在進行初始化操作
> vue-module-pro @1.0.9 new ${專案路徑}
> plop
執行完畢後,按照下面的指令輸入相關資源名稱
? 請輸入工程名稱:
? 是否需要生成專案公共頭?(y/N)
? 是否使用VantUI元件?(y/N)
? 請輸入後端地址:
? 請輸入前端執行埠(例如:8080):
按照順序執行以上命令後,就可以自動生成一個新的模組,展示如下成功介面。
TIP
新的微模組含有基礎頁面和必須元件,能夠直接支援啟動和打包。
如何進行模組劃分
明確這個問題首先要了解本工程的實現機制
工程通過分模組的方式實現了前端微服務化
,也就是說工程並沒有強制規定同學們對模組的定義。示例:
可以將一個頁面作為一個模組;
可以按照業務進行模組劃分,一個業務分管一個模組;
可以按照產品進行劃分,一個模組代表一個產品;
按照實際生產可以在工程裡建立N個模組,模組可以呼叫一個或多個後端。
src
下面的每一個資料夾(除了comm
)分別代表了每一個模組的模組名稱,對應一個頁面/業務/產品。
本作品採用《CC 協議》,轉載必須註明作者和本文連結