前言
本文將介紹一下vue項目的模塊化方案和屎，主要是針對手機端的頁面，使用Vue CLI構(gòu)建項目。一個前端架構(gòu)的App一般會有很多不同的模塊逢倍，能夠?qū)⒛K分開開發(fā)打包發(fā)布是一個vue工程的基礎(chǔ)架構(gòu)。Vue CLI的pages對象是支撐這一架構(gòu)的核心景图。
在閱讀文章之前必須先熟悉 Vue CLI和 node.js
工程中不少配置都參考了這兩塊的知識點较雕。
開發(fā)工具
Hbuilder X 3.1.13
@vue/cli 4.5.13
工程目錄介紹
如何創(chuàng)建一個模塊
一、在modules.config.js配置文件中最上面找到moduleArray數(shù)組挚币，添加一條數(shù)據(jù)作為新的模塊的配置亮蒋。
const moduleArray = [
{ moduleName: 'discounts', title: '打折' },
{ moduleName: 'activity', title: '活動' },
];
二、在工程的modules文件夾下新建新的文件夾（文件夾名必須與第一步modules.config.js文件里面配置的moduleName匹配）作為你新創(chuàng)建的模塊妆毕。模塊內(nèi)部的文件目錄必須與工程演示的例如activity模塊保持一致慎玖。也可以直接將activity文件夾整個拷貝一份改改名字。
調(diào)試
- 代理配置
使用npm run serve調(diào)試的時候设塔，為了從服務(wù)器獲取數(shù)據(jù)同時也為了解決可能的跨域問題需要配置proxy代理凄吏。
相關(guān)配置參照proxy.config.js文件，devHost就是調(diào)試過程中的代理地址闰蛔。開發(fā)過程中按照自己的實際情況修改痕钢。 - 瀏覽器打開相關(guān)模塊的頁面
使用(http://localhost:8080/[模塊名]#/[模塊首頁]) 的地址打開相關(guān)模塊頁面進行調(diào)試。
例如activity模塊首頁的地址為：http://192.168.2.5:8080/activity#/activityIndex
打包
使用 npm run build [模塊名] 打包單個模塊序六。
例如我們只需要打包activity模塊任连，命令為：npm run build activity 。
使用 npm run build:all 打包所有模塊例诀。
查看package.json文件scripts腳本可以看到随抠，相關(guān)腳本相比Vue CLI原始工程的腳本已經(jīng)做了修改。
"scripts": {
"serve": "vue-cli-service serve",
"build": "node ./config/build.js --mode production",
"build:all": "node ./config/build.js --mode production --all",
"lint": "vue-cli-service lint",
"inspect": "vue inspect > webpack.inspect.json"
}
build和build:all是通過node運行config文件夾下的build.js文件來實現(xiàn)模塊化打包的繁涂。build.js文件主要實現(xiàn)了打包之前的文件刪除拱她，打包命令解析，打包子進程的管理等操作扔罪。
github: 工程代碼
網(wǎng)盤： 工程代碼 密碼: 0u0r
參考：
http://nodejs.cn/api/child_process.html
https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md#聲明-program-變量
https://segmentfault.com/a/1190000016788484
https://segmentfault.com/a/1190000011831802
https://xwenliang.cn/p/5acf36bef4c855403a000002
https://www.npmjs.com/package/ora
https://blog.csdn.net/weixin_38203203/article/details/104329844
https://www.cnblogs.com/xwwblog/p/13606604.html
https://www.cnblogs.com/xbzhu/p/11815197.html
https://segmentfault.com/q/1010000016925412
https://segmentfault.com/a/1190000007294861#articleHeader9
https://segmentfault.com/q/1010000019161214?utm_source=sf-similar-question
https://www.cnblogs.com/love314159/p/14234058.html
