總體原則：極簡、極快、解耦
主要適用範圍：vue 單頁項目+
文件組織規範
文件結構
原則：文件少、層級淺、資源集中、相對獨立互不影響
基本結構：
.
|_ node_modules
|_ dist
|_ src
|_ assets // 公共資源
|_ img // 全局圖片
|- favicon.png
|- common.js // 全局公用 js
|- common.less // 重置樣式表 + 自定義全局樣式
|- mixin.less // 全局 less 變量
|- template.html // 模板
|_ components // 組件
|_toast
|- index.vue
|- index.less
|- index.js // 所有組件的集合
|_ pages // 具體頁面
|_ index // 首頁
|- index.vue
|- index.less
|- good.png // 少量本頁面下獨自使用的圖片
|- img // 兩個以上頁面都用到的圖片單獨抽離防止
|- copy.jpg
|_ temp // 模板
|- index.vue
|- index.less
|_ router // 路由
|- index.js
|_ vuex // vuex 插件
|- index.js
|- App.vue
|- main.js説明：
- 關於圖片：少量直接放到本頁面文件下（資源集中，互不影響），有兩個頁面以上公用則抽離放到 img 文件夾下（降低層級），assets 下的 img 主要放 favicon.png、pwa等全局圖片（低頻資源遠離，不分散注意力）
- assets 目錄：放全局資源，此類資源輻射全局，改動頻率低，集中在一起，為更好地聚焦核心
- temp 文件：不用新建頁面，直接複製然後改個文件名即可
文件命名
文件命名統一使用小寫字母，必要的時候可以加中劃線 -
頁面文件名不宜過長，裏面的文件統一以 index 為前綴，index.vue、index.less
父子組件命名：
|_ button-group // 組件組合
|_ button // 組件
|_ cell // 父組件
|_ cell-item // 子組件JS 規範
JS 書寫格式
藉助 Eslint 以及編輯器的代碼格式化功能確保代碼格式統一
Eslint 使用 JavaScript standard 代碼規範
JS 命名
- 全部用單引號
- 統一用駝峯命名法，儘量保持語義化
- 類名開頭大寫
- 合理使用複數、簡稱、縮寫
- 多寫註釋，同時保持精煉
CSS 規範
規則：全部用雙引號，小寫。每個頁面的 css 命名以文件外層文件夾名字加 _index 作為開頭（所以説一開始文件夾名字不宜過長），統一使用下劃線輔助 _
比如：
.about_index{
.tit{
font-size: 18px;
}
.nav{
margin-bottom: 20PX;
}
}原因：下劃線易選中複製，js 中不允許有中劃線，js 操作類名夾帶中劃線互相混在一起，加重記憶負擔，容易混淆；文件名稱都是不重複的，以文件名作為此頁面類名的開頭可以確保不會有重複，然後此類名下的命名可與其他頁面重複，依靠層級限制類名可重複使用，極大減輕樣式命名的工作量
HTML 規範
- 增強語義化：儘量使用 h5 新標籤
- 標籤嵌套規則，防止詭異錯誤：
ul、ol下嵌套li，dl下嵌套dt、dd，p、dt、h標籤裏面不嵌套塊元素，a標籤不能嵌套a，行內元素不能嵌套塊元素 - 注意 seo 優化：
img、a、strong、em、h1-h3 - 格式化標籤：
span、em、strong格式化成無語義標籤，i統一給圖標使用 - 全部用雙引號，小寫
性能優化
提交代碼前檢查
- 圖片
必須加 favicon；
有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現；
ps 中的切圖 jpg 品質取非常高(80)，然後用 PPDuck 壓圖工具做無損壓縮；
儘量使用 jpg 的圖，移動端大張圖片不大於 50kb；
移動端使用 2x 圖；
避免空的 src 和 href； - a 標籤 href 如果為空，統一使用
"javascript:;"而非"void(0)" border-radius: 2px值不能為單數，最小為2px- 定位元素垂直居中
top值一般寫45%，50%看起來會偏下 - 合理的鼠標光標
- 節流防抖
- 類型轉換、非空判斷
- 異步請求空白處理機制，比如加載 loading
- 統一的錯誤返回處理機制
- 微信分享標題敏感字，紅包、錢...
- app回退、跳轉是否正確
iOS、android - 適配需要考慮
320~750 320 480 640 iphoneX等 - 擴大點擊區域
優化速度
- 頁面首次打開請求接口不可超過3個，過多請求需要整合
- 控制域名數量，每個頁面請求域名一般有3個，一個主域名，一個靜態資源域名，一個埋點分析域名（存在資源並行下載數限制的問題）
- 綜合衡量
css、js的請求數量和包大小，超過 150kb 考慮做拆分 - 後端接口做緩存
- 靜態資源統一部署到 CDN
- 開啓 zip 壓縮
