[隨手記]VUE組件結構和前端代碼規範

本文整理了VUE項目的目錄結果，和開發中的部分代碼規範，供參閱和交流

VUE 目錄結構

pre
.
├── README.md        // README.md
├── build            // 編譯配置目錄
├── config           // 環境配置目錄
├── index.html       // index.html
├── node_modules // 依賴模塊
├── package.json     // 依賴索引目錄
├── src
│   ├── App.vue  // 頁面入口文件
│   ├── assets       // 動態資源目錄(這裏的資源會被webpack編譯打包)
│   ├── component    // 公共組件目錄
│   ├── main.js      // js入口文件
│   ├── mock         // 開發用模擬接口數據
│   ├── page         // 頁面
│   │   ├── Home     // 頁面組件包含的組件目錄（頁面主目錄用大駝峯命名，非主目錄駝峯命名）
│   │   │   └── HomeHeader.vue（Vue文件大駝峯命名）
│   │   └── Home.vue // 頁面組件
│   ├── router       // 路由目錄
│   └── store        // store目錄
└── static           // 靜態資源目錄(這裏的資源不會被webpack編譯打包)

前端代碼(VUE項目)編碼規範整理

1. 註釋
   • 註釋一般放在被註釋代碼上一行。
   • prop，data必須有命名註釋，順序符合邏輯要求。
   • function需要說明註釋，參數/返回說明註釋，並且內部關鍵邏輯需要註釋。
   • dom多層需要對分塊註釋。
   • 對代碼進行變更修改時，注意修改相應註釋及命名，注意註釋的描述上下文，避免說明混淆。
2. 代碼書寫規範
   • 一般情況下不可disable eslint規範。
   • 頁面主要目錄的文件夾命名爲大駝峯，非主要目錄的文件夾命名爲小駝峯。
   • vue文件命名爲大駝峯。
   • 頁面內service、mixins的JS文件命名爲大駝峯。
   • 公共方法JS文件命名爲點+小寫命名。
   • 命名注意語義化，一般情況下禁止使用數字等區分度不清晰的命名。
   • 儘量使用英文命名。
   • 一行代碼字符數儘量不要太長，注意換行，換行時注意保持上下層級換行方式一致性。
   • 代碼嵌套儘量不要太深，通過減少換行來處理代碼豎方向太長的問題。
   • templete，script，style標籤之間需要多一個換行留空。
3. CSS 規範
   • CSS儘量使用BEM規範。
   • 已統一處理響應式，所有尺寸使用rem，但1px不使用rem直接寫1px。
   • 基礎文字大小爲0.28rem/0.3rem。
   • 因使用主題，所有顏色值儘量使用主題規範中色值，除非不根據主題變化顏色，如遮罩層等。
   • 注意全局污染問題，使用強命名空間或scoped，新建全局樣式注意通用問題，儘量不引用樣式文件，減少打包體積。
4. 方法設計規範
   • 儘量採用純函數設計。
   • 儘量減少函數方法耦合性。
   • if / switch 等方法注意處理default情況。
   • 如有通用方法可設計service、mixins。
   • 方法一般情況下需要校驗參數。
   • 方法需要處理邊界值，調用失敗等情況，不可直接拋出異常，即使拋出異常也需要有catch的地方。
5. 組件設計規範
   • 組件必須有name屬性，使用大駝峯命名，一般情況下與文件名一致/命名組合一致。
   • name屬性後必須多一個換行留空。
   • 採取守護變量、或響應變量兩種設計方式，不可混合使用。
   • 注意兩種組件設計的使用場景區別。
   • 一般情況下禁止使用Array.index作爲key在組件中傳遞，或作爲唯一值渲染。