vue專案搭建目錄以及標準(慢慢摸索)

Shao Mingchen發表於2020-11-13

專案搭建:
1.專案公共元件放在src/components。
2.由於程式碼結構複雜拆分出去的,業務元件放在子目錄components。
3.vue檔案裡面把資料處理程式碼拆分出去,寫好的檔案css也獨立拆分出去(細小的元件一行兩行的未拆分)。使得vue檔案

元件劃分:
View層減重的基礎,將可共用的檢視元件剝離出去,改為訊息機制進行通訊,甚至直接剝離出包含檢視和業務程式碼的業務邏輯元件,都可以有效地拆分View層,降低程式碼的複雜度。

Api/ axios的統一放置
/api_user 介面地址編寫
/env 切換介面地址
/index axios配置

Directive/ 公共自定義指令,沒必要全域性掛載的就別全域性掛載。

Assets/ 靜態檔案資源 (專案為單位的靜態都放這)
/font 本地字型
/image 圖片

Style/ 樣式檔案(scss,less,css)

Components/ 公共元件

Vender/ 第三方元件本地化

Utils/ 工具類:放置一些公用的方法類,以專案為單位。
(一個類方法越少越好,特殊的最好一個類一個方法,以功能命名)

Filter/ 過濾器,放置過濾器和一些資料格式過濾
/index eg:時間格式化,把格式化歸到了過濾裡邊
/htmlFilter 全域性過濾器

Mixin/ 混入元件的程式碼,數量不多直接以功能命名。動態資料變化的放在這裡面。

staticData/ 靜態資料,多個js檔案以資料功能命名。

Router/ 路由根據模組拆分,模組單位,油田、儲氣庫…

Store/ vuex,僅僅放置一些全域性狀態,謹慎用。

Js/ 業務資料處理層
js/common 放置業務元件的公共方法,以單個方法命名,減少檔案佔用。

資料處理層按照業務剝離(js的剝離):在對應的js/ 中,對應頁面有相應的js。
Js細分標準,多數檔案用到的提出到common,單個元件用到的,提出到檔案頂端。公共data提出到,staticData/

方法優化。規範返回值,引用資料型別的返回。

相關文章