一、UI框架及css預處理器選擇
1、PC端Vue項目UI框架：ElementUI（優(yōu)先）、iView
2、移動端Vue項目UI框架：mint-ui（優(yōu)先）、vant
3、sass/scss、less、stylus ?????
推薦less：less相對比sass更簡潔，而stylus的語法靈活性開放性過大，不利于團隊協(xié)作開發(fā)。
二、腳手架、插件選擇
2.1、腳手架vue-cli2.0 OR vue-cli3.0
推薦vue-cli2.0：團隊中熟悉2.0版本腳手架的人居多，腳手架是一個工具類的存在。
2.2、網絡請求：axios
2.3、時間格式化插件：momentjs
2.4、富文本編輯器：ueditor
2.5、圖片剪裁插件：cropperjs
2.6、圖表：echarts
三、命名規(guī)范
3.1、id和class的命名原則
應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名（原則：見名知其義）
3.2、文件夾、文件名、id、class具體命名規(guī)范:駝峰命名法
- 文件夾采用“大駝峰命名法”
例：DataBaseUser：變量DataBaseUser單詞首字母大寫。
注：文件名不要以中文或人名命名，可以在文件內部注釋說明是誰修改或建立的這個文件
- 文件名采用“大駝峰命名法”
例：DataBaseUser：變量DataBaseUser單詞首字母大寫。
- id：采用“小駝峰命名法”
例：myStudentCount：變量myStudentCount第一個單詞是全部小寫，后面的單詞首字母大寫。
- class：采用“中劃線法命名法”
例：print-employee-paychecks：函數(shù)名中的每一個邏輯斷點都有一個下劃線來標記。
3.3、id和class命名越精簡越好，只要足夠表達意思，這樣有助于理解，同時也能提高代碼效率
.navigation{} /* 不推薦 */
.login_box_inside_con{} /* 不推薦 */
.nav{} /* 推薦 */
3.4、命名嵌套問題
書寫css要注意先后順序和嵌套問題，從性能上考慮盡量減少選擇器的層級
.nav ul.list{} /* 不推薦 */
.nav .list{} /* 推薦 */
3.5、命名中盡量避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合
- 命名注意縮寫，但是不能盲目縮寫；
- 不允許通過1、2、3等序號進行命名；
- 避免class與id重名；
- id注意用于標識模塊或頁面的某一個父容器區(qū)域，名稱必須唯一，不要隨意新建id；
- class用于標識某一個類型的對象，命名必須言簡意賅；
- 盡可能提高代碼模塊的復用，樣式盡量用組合的方式；
- 規(guī)則名稱中不應該包含顏色、定位等與具體顯示效果相關的信息，應該用意義命名，而不是結果名稱。
3.6、Vue 項目中的命名
* Store 中的Module 使用“小駝峰命名法”
* Store 中的Mutation 使用 全部大寫的下劃線命名法
* Store 中的state/getters/action 使用“小駝峰命名法”
* 組件必須使用“大駝峰命名法”命名法,
* 引用組件時禁止使用別名，模板內組件標簽名遵循h(huán)tml 標簽命名規(guī)范，或者使用組件名
* 組件名必須避免使用Vue保留標簽名（包括HTML標簽和Vue內部標簽）
* 組件文件和組件使用相同的名字
* 前端路由路徑使用全小寫命名法
四、排版規(guī)范
4.1、代碼格式
- 1、大括號的使用約定。
* 如果是大括號內為空，則簡潔地寫成{}即可，不需要換行
例：{}
* 非空代碼塊則:
（1）左大括號前不換行有空格；
（2）左大括號后換行；
（3）右大括號前換行；
（4）右大括號后還有else等代碼則不換行;
（5）表示終止的右大括號后必須換行。
例：
methods: {
testFunc () {
console.log("測試方法");
var flag = false;
if (this.num === 0) {
flag = true;
} else {
flag = false;
}
}
}
- 2、左右小括號與中間字符之間不出現(xiàn)空格。
例：
if (this.num === 0) { // 左右小括號()中間字符直接不出現(xiàn)空格
flag = true;
}
- 3、if/for/while/switch 等保留字與括號之間都必須加空格。
例：
if () {}
for () {}
while () {}
switch () {}
- 4、任何二目、三目運算符的左右兩邊都需要加一個空格。
例：
int a = 1, b = 2, z, c = 3;
z = a > b ? a : (b > c ? b : c);
- 5、注釋的雙斜線與注釋內容之間有且只有一個空格
例：
// 我就是個注釋信息展示
/** 我就是個注釋信息展示 **/
/**
** 我就是個注釋信息展示
**/
- 6、方法參數(shù)在定義和傳入時，多個參數(shù)逗號后邊必須加空格。
例：
methods: {
testFunc (pra1, pra2, pra3) {
console.log("測試方法");
var flag = false;
if (this.num === 0) {
flag = true;
} else {
flag = false;
}
}
}
- 7、在 if/else/for/while/do 語句中必須使用大括號。即使只有一行代碼，避免采用 單行的編碼方式:if (condition) statements;
五、項目目錄結構
5.1、項目初始目錄
├── node_modules // 項目依賴包文件夾
├── build // 編譯配置文件，一般不用管
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 項目基本設置文件夾
│ ├── dev.env.js // 開發(fā)配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 編譯配置文件
├── index.html // 項目入口文件
├── package-lock.json // npm5 新增文件，優(yōu)化性能
├── package.json // 項目依賴包配置文件
├── src // 我們的項目的源碼編寫文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始項目資源目錄，回頭刪掉
│ │ └── logo.png
│ ├── components // 組件目錄
│ │ └── Hello.vue // 測試組件，回頭刪除
│ ├── main.js // 主配置文件
│ └── router // 路由配置文件夾
│ └── index.js // 路由配置文件
└── static // 資源放置目錄
5.2 src目錄配置
├── App.vue // APP入口文件
├── components // 組件文件夾
│ └──common // 共用組件文件夾
│ └──page // 我們的頁面組件文件夾
│ │ ├── home // 模塊劃分文件夾
│ │ ├── user // 模塊劃分文件夾
│ └──Main.vue // 項目主入口文件
├── plugins // 項目配置文件夾
│ └── ajax // 網絡請求配置文件
│ │ ├── http.js // 網絡請求封裝文件
│ └── api // 常用工具文件夾
│ │ ├── index.js // 自定義工具注冊入口
│ │ ├── ValideCard.js // 身份證驗證規(guī)則文件
│ │ ├── valideEmail.js // 郵箱驗證規(guī)則
│ │ ├── valideTel.js // 手機號證規(guī)則
│ └── url // 項目配置文件
│ │ ├── index.js // 接口注冊入口
│ │ ├── url.js // 接口API自定義文件
├── main.js // 項目配置文件
├── router // 路由配置文件夾
│ └── index.js // 路由配置文件
├── style // scss 樣式存放目錄（待定，選用less或scss）
│ ├── base // 基礎樣式存放目錄
│ │ ├── _base.scss // 基礎樣式文件
│ │ ├── _color.scss // 項目顏色配置變量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 瀏覽器初始化文件
│ ├── scss // 頁面樣式文件夾
│ │ ├── _content.scss // 內容頁面樣式文件
│ │ └── _index.scss // 列表樣式文件
└── style.scss // 主樣式文件
5.3 CSS屬性編寫順序（一般遵循顯示屬性 -> 自身屬性 -> 文本屬性 -> 其他屬性的書寫格式）
- 顯示屬性：display/list-style/position/float/clear...
- 自身屬性（盒模型）：width/height/margin/padding/border
- 背景：background
- 行高：line-height
- 文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
- 其他：cursor/z-index/zoom/overflow...
- CSS3屬性：transform/transition/animation/box-shadow/border-radius
-
如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照-webkit-/-moz-/-ms-/-o-/std的順序進行添加，標準屬性寫在最后
鏈接的樣式請嚴格按照如下順序添加：a:link -> a:visited -> a:hover -> a:active
屬性編寫順序.png
注：補充說明
1、刪除多余的空行
所有方法與方法之間空1行
所有代碼塊之間空1行
2、刪除多余的注釋
刪除注釋掉的代碼
刪除沒有意義的注釋
3、刪除多余的方法
如果方法沒有使用到，請刪除它
如果方法沒有執(zhí)行任何業(yè)務邏輯，請刪除它或者給出一定注釋
4、刪除未被使用的資源文件
5、添加必要的注釋
所有自定義的方法需要給出注釋
比較大的代碼塊需要給出注釋
所有代碼中出現(xiàn)的阿拉伯數(shù)字需要給出注釋
程序中出現(xiàn)加密／解密 邏輯的操作地方，需要給出注釋說明過程（無論是系統(tǒng)還是自定義）
- 整體代碼風格需要統(tǒng)一
代碼后面的“{” 不需要單獨占用一行
邏輯運算符 與 代碼之前空一格
