一稀颁、 文件/文件夾命名規(guī)范
1. src/Views
- 以一級菜單或模塊分文件夾：權(quán)限管理、會員管理
- 文件夾為大駝峰命名：PermissionManagement俊戳、Login
- 各個模塊下頁面以頁面path大駝峰命名：MemberList.vue竣付、MenuManagement.vue
- 不要用index.vue文件，除非該菜單下包含三級路由：列表詳情需要單獨(dú)頁面鉴象，可以把列表和詳情頁都放在三級菜單忙菠，index.vue作為router-view容器
- 模塊下的靜態(tài)數(shù)據(jù)、類型定義纺弊、脫耦方法牛欢、復(fù)雜方法、數(shù)據(jù)處理方法等可提取的一切都放到對應(yīng)模塊下的js中淆游，以功能創(chuàng)建文件：const.ts傍睹、func.ts、types.ts
- 模塊下組件提取到component文件夾下犹菱，頁面組件非必要不提取拾稳，必要條件：單獨(dú)功能點(diǎn)（上下文耦合極低）、復(fù)用（覆蓋超過80%）
2. src/components
- 組件本身使用大駝峰命名
- 0耦合組件直接放在basic文件夾下：任何項(xiàng)目都可以用 Icon.vue
- 本項(xiàng)目組件按照組件類型分文件夾：2種表格/table/DefaultTable.vue和/table/ColorTable.vue腊脱、/modal/DefaultDialog.vue
3.其他
- 任何文件命名都要規(guī)范访得，最少做到望文知義
二、src/styles/提取規(guī)范
- 提取的樣式一般不涉及業(yè)務(wù)
- 提取的顆粒度做到最小
- 提取的樣式class以功能命名：m-top-16(mt-16)陕凹，text-aline-center(ta-center)
- 提取的樣式的值必須是項(xiàng)目中常用的：例如padding和margin一般ui設(shè)計(jì)的時(shí)候都是有規(guī)范的悍抑，例如8px鳄炉、16px、24px或者10px搜骡、20px拂盯、30px之類的，例如flex定義為1的情景记靡，特殊場景在vue文件內(nèi)自定義
- ui框架需要統(tǒng)一樣式覆蓋的情景（官方方案滿足不了）磕仅，樣式覆蓋外層一定要帶上業(yè)務(wù)class，避免影響到其他同事的頁面簸呈，需要覆蓋的頁面直接附上class即可
- 業(yè)務(wù)樣式不需要提取榕订，復(fù)用性高的話就要考慮為什么不提取組件了
- class都是以小寫中劃線命名，別和我說什么方便復(fù)制
- 補(bǔ)充一點(diǎn)：通用class以功能命名蜕便，那么業(yè)務(wù)class就一定是以業(yè)務(wù)來命名：user-block劫恒、username、user-age轿腺，2種命名不要弄混了
三两嘴、src/components/提取規(guī)范
- 組件比較復(fù)雜或和業(yè)務(wù)關(guān)聯(lián)性比較強(qiáng)的時(shí)候，可以對組件本身進(jìn)行拆分
- 組件的不同情景盡量使用slot族壳，不要使用if-else
- 組件的樣式盡量不使用公共class憔辫，而是再組件內(nèi)部消化（方便其他項(xiàng)目單獨(dú)使用）
四、src/utils/仿荆、src/const/贰您、src/hooks/提取規(guī)范
- utils 為全局工具類，里面是全局的方法：request.ts拢操、dateFormate.ts锦亦、auth.ts
- const為項(xiàng)目常量，一般是鍵值對令境、固定的數(shù)據(jù)列表等杠园，最好按照業(yè)務(wù)模塊文件區(qū)分
- hooks前提必須先明白什么是hook，然后再進(jìn)行提取舔庶，理論上hook對業(yè)務(wù)是極低耦合的：每個頁面都要記錄用戶行為抛蚁，那么點(diǎn)擊上報(bào)這就是一個hook
- 當(dāng)然要utils干凈一點(diǎn)，可以有一個單獨(dú)的func文件夾惕橙，用來放公共方法
五瞧甩、其他規(guī)范（參考）
http://www.reibang.com/p/85e93d2ce8f6
https://gitee.com/webxingjie/document/blob/master/前端開發(fā)規(guī)范.md
未完待續(xù)
