Vue規范
一、文件夾結構化規范
├── index.html 入口頁面
├── build 構建腳本目錄
│ ├── build-server.js 運行本地構建服務器，可以訪問構后的頁面
│ ├── build.js 生產環境構建腳本
│ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新
│ ├── dev-server.js 運行本地開發服務器
│ ├── utils.js 構建相關工具方法
│ ├── webpack.base.conf.js wabpack基礎配置
│ ├── webpack.dev.conf.js wabpack開發環境配置
│ └── webpack.prod.conf.js wabpack生產環境配置
├── config 項目配置
│ ├── dev.env.js 開發環境變量
│ ├── index.js 項目配置文件
│ ├── prod.env.js 生產環境變量
│ └── test.env.js 測試環境變量
├── mock mock數據目錄
│ └── hello.js
├── package.json npm包配置文件，里面定義了項目的npm腳本，依賴包等信息
├── src 項目源碼目錄
│ ├── main.js 入口js文件
│ ├── App.vue 根組件
│ ├── components 公共組件目錄
│ │ └── title.vue
│ ├── assets 資源目錄，這里的資源會被wabpack構建
│ │ ├── css 公共樣式文件目錄
│ │ ├── js 公共js文件目錄
│ │ └── img 圖片存放目錄
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 應用級數據（state）
│ │ └── index.js
│ └── views 頁面目錄
│ ├── hello.vue
│ └── notfound.vue
├── static 純靜態資源，不會被wabpack構建。
└── test 測試文件目錄（unit&e2e）
└── unit 單元測試
├── index.js 入口腳本
├── karma.conf.js karma配置文件
└── specs 單測case目錄
└── Hello.spec.js
二、 vue文件基本結構
<template>
<div>
<!--必須在div中編寫頁面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
methods: {
},
mounted() {
}
}
</script>
<!--聲明語言，並且添加scoped-->
<style lang="less" scoped>
</style>
三、 注釋規范
1.公共組件使用說明
2.各組件中重要函數或者類說明
3.復雜的業務邏輯處理說明
4.特殊情況的代碼處理說明,對於代碼中特殊用途的變量、存在臨界值、函數中使用的hack、使用了某種算法或思路等需要進行注釋描述
5.注釋塊必須以/**（至少兩個星號）開頭**/；
6.單行注釋使用//；
四、 編碼規范
1.使用ES6風格編碼源碼
定義變量使用let ,定義常量使用const
使用export ，import 模塊化
2.組件 props 原子化
提供默認值
使用 type 屬性校驗類型
使用 props 之前先檢查該 prop 是否存在
3.避免 this.$parent
4.謹慎使用 this.$refs
5.無需將 this 賦值給 component 變量
6.調試信息console.log() debugger 使用完及時刪除
五、組件命名規范
1. 有意義的名詞、簡短、具有可讀性
2. 以小寫開頭，采用短橫線分割命名
3. 公共組件命名以公司名稱簡拼為命名空間(app-xx.vue)
4. 文件夾命名主要以功能模塊代表命名
六、vue 方法放置順序
components 模板
props 父子組件傳遞信息
data
created
mounted
activited
update
beforeRouteUpdate
metods
filter
computed
watch
七 HTML 規范
1.結構順序和視覺順序基本保持一致
2.結構，表現，行為三者分離，避免內聯
3.保持良好的簡潔的樹形結構
4.結構上如果可以並列書寫，就不要嵌套。
如果可以寫成<div></div><div></div>那么就不要寫成<div><div></div></div>
5.如果結構已經可以滿足視覺和語義的要求，那么就不要有額外的冗余的結構。
比如<div><h2></h2></div>已經能滿足要求，那么就不要再寫成<div><div><h2></h2></div></div>
6.一個標簽上引用的類名不要過多，越少越好。
比如不要出現這種情況：<div class =“class1 class2 class3 class4”> </ div>
7.對於一個語義化的內部標簽，應盡量避免使用的className。
比如在這樣一個列表中，li標簽中的itm應去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
八 CSS 規范
1.命名規則
使用類選擇器，放棄ID選擇器
NEC特殊字符："-"連字符
分類的命名方法：使用單個字母+"-"為前綴
命名應簡約而不失語義
2.代碼格式
選擇器、屬性和值都使用小寫
單行寫完一個選擇器定義
最后一個值也以分號結尾
省略值為0時的單位
使用單引號
根據屬性的重要性按順序書寫
注釋格式：/* 注釋文字 */
選擇器順序
請綜合考慮以下順序依據：
從大到小（以選擇器的范圍為准）
從低到高（以等級上的高低為准）
從先到后（以結構上的先后為准）
從父到子（以結構上的嵌套為准）
九 工程師規范
了解產品和設計
提出疑問和見解
技術調研和培訓
預算人力和時間
職責任務
頁面開發
提取剝離
自測聯調
提交驗收
交接說明
總結分享
變更維護