中小型項目前端架構(gòu)(編輯修改稿)
2025-07-26 20:07 本頁面
【文章內(nèi)容簡介】 無需將架構(gòu)層級劃分的比較細，只需要按其類型劃分即可；根據(jù)原型圖來看，頁面復雜程度有限，復用部分不是很多，因此可以確定哪些東西需要封裝復用，哪些比較復雜需要獨立封裝，哪些比較簡單為了簡化開發(fā)難度可以直接耦合；自己比較熟練單頁面網(wǎng)站，因此采用以單頁面為主，異步加載其他頁面的形式。于是使用相關(guān)配套的東西，比如webpack，vuerouter等，另外為了開發(fā)和生產(chǎn)的方便性，采用以下模式進行開發(fā)。第三，劃分功能：首先有一個根html，用戶需要通過訪問它來加載我們的js邏輯。，我們的前端代碼可以被劃分為三部分： 組件樹 功能模塊 各種資源如下圖：功能劃分好之后，相同功能的放在同一個文件夾下，命名風格應該類似。具體來說，組件樹相關(guān)的東西，放置在ponents文件夾下；資源，有圖片或者國際化資源等，放置在resources文件夾下；而功能插件、服務(wù)等，因為可能被多處引用，因此為了方便引用，放在src文件夾下，并且該文件夾是ponents文件夾和resources文件夾的上級文件夾。第四，細化功能模塊：功能、組件樹以及資源，我們已經(jīng)明確了有哪些東西，那么接下來，我們要明確這些東西該如何以文件的形式來劃分。如下圖：1. 項目構(gòu)建相關(guān) ，也要使用es6語法，因此babel是必須的； 又因為要自動化混淆打包，因此webpack也是必須的； 最后因為要方便多人協(xié)同，方便不同人可以快速自動化通過npm install來安裝依賴，也是必須的。2. CDN相關(guān)而又因為我們要采用外部字體（需求要求引入非常見字體），因此CDN加速是必須的，該字體文件放在html中來配置引用即可。3. 配置和插件18
電大資料相關(guān)推薦
鄂ICP備17016276號-1