vue.js 前端工程編碼規範
結構化規範（webpack）
├── index.html 入口頁面
├── favicon.ico 頁面圖標
├── .babelrc babel規則
├── .editorconfig 編輯器配置
├── .eslintignore eslint忽略規律
├── .eslintrc.js eslint規則
├── .gitignore git忽略規則
├── 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生產環境配置
│ └── webpack.cdn.conf.js wabpack cdn配置
│ └── webpack.dll.conf.js wabpack dll配置
├── config 項目配置
│ ├── dev.env.js 開發環境變量
│ ├── index.js 項目配置文件
│ ├── prod.env.js 生產環境變量
│ └── test.env.js 測試環境變量
├── mock mock數據目錄
│ └── hello.js
├── package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
├── readmd.md 項目描述文件
├── src 項目源碼目錄
│ ├── main.js 入口js文件
│ ├── App.vue 根組件
│ ├── components 公共組件目錄
│ │ └── title.vue
│ ├── assets 靜態資源目錄，這裏的資源會被wabpack構建
│ │ ├── css 公共樣式文件目錄
│ │ ├── js 公共js文件目錄（如幫助方法）
│ │ └── img 圖片存放目錄
| |── lib 外部引用的插件存放及修改文件
| |—— datas 模擬數據，臨時存放
│ ├── routes 前端路由
│ │ └── index.js
│ ├── api 接口，統一管理
│ │ └── index.js
│ ├── store vuex, 統一管理
│ │ └── 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>
</template>
<script>
export default {
components: {},
data() {
return {};
},
methods: {},
mounted() {}
};
</script>
<!-- 聲明語言，並且添加scoped -->
<style lang="less" scoped></style>
vue 文件方法聲明順序
- components
- props
- data
- computed
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods
- watch
標籤屬性自動換行
對除第一個屬性外的其他每個屬性進行換行，並保持對齊
<!-- 推薦 -->
<a :href="item.onestore_url"
target="_blank"
@click="goToDownload()">
<img src="../images/one_downloadbadge_red_black.png"
alt="download-icon">
</a>
<!-- 不推薦 -->
<a :href="item.onestore_url" target="_blank" @click="goToDownload()">
<img src="../images/one_downloadbadge_red_black.png" alt="">
</a>
組件命名規範
1、組件名應該始終是多個單詞的，根組件 App 除外
2、有意義的名詞、簡短、具有可讀性
3、命名遵循 PascalCase(單詞首字母大寫命名) 約定
4、公用組件以 Geexek(公司名縮寫簡稱) 開頭，如（GeexekDatePicker,GeexekTable）
5、頁面內部組件以組件模塊名簡寫爲開頭，Item 爲結尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
6、使用遵循 kebab-case(短橫線分隔命名) 約定
在頁面中使用組件需要前後閉合，並以短線分隔，如（，）
7、導入及註冊組件時，遵循 PascalCase(單詞首字母大寫命名) 約定
8、必須符合自定義元素規範: 切勿使用保留字。
props 命名規範
1、在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板中應該始終使用 kebab-case
<!-- 推薦 -->
<script>
props: {
greetingText: String;
}
</script>
<welcome-message greeting-text="hi"></welcome-message>
<!-- 不推薦 -->
<script>
props: {
'greeting-text': String
}
</script>
<welcome-message greetingText="hi"></welcome-message>
註釋規範
代碼註釋在一個項目的後期維護中顯的尤爲重要，所以我們要爲每一個被複用的組件編寫組件使用說明，爲組件中每一個方法編寫方法說明。
以下情況，務必添加註釋
1.公共組件使用說明
2.各組件中重要函數或者類說明
3.複雜的業務邏輯處理說明
4.特殊情況的代碼處理說明,對於代碼中特殊用途的變量、存在臨界值、函數中使用的hack、使用了某種算法或思路等需要進行註釋描述
5.註釋塊必須以/（至少兩個星號）開頭/；
6.單行註釋使用//；
7.多重 if 判斷語句
編碼規範
1、使用 ES6 風格編碼源碼
2、定義變量使用 let ,定義常量使用 const
3、靜態字符串一律使用單引號或反引號，動態字符串使用反引號
// 推薦
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';
// 不推薦
const a = 'foobar';
const b = 'foo' + a + 'bar';
4、解構賦值
// 數組解構賦值
const arr = [1, 2, 3, 4];
// 推薦
const [first, second] = arr;
// 不推薦
const first = arr[0];
const second = arr[1];
// 對象解構賦值
// 推薦
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {}
// 不推薦
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
5、拷貝數組
使用擴展運算符（...）拷貝數組。
const items = [1, 2, 3, 4, 5];
// 推薦
const itemsCopy = [...items];
// 不推薦
const itemsCopy = items;
6、箭頭函數
需要使用函數表達式的場合，儘量用箭頭函數代替。因爲這樣更簡潔，而且綁定了 this
// 推薦
const boundMethod = (...params) => method.apply(this, params);
// 不推薦
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
};
7、模塊
如果模塊只有一個輸出值，就使用 export default，如果模塊有多個輸出值，就不使用 export default，export default 與普通的 export 不要同時使用
// 推薦
import myObject from './importModule';
// 不推薦
import * as myObject from './importModule';
8、如果模塊默認輸出一個函數，函數名的首字母應該小寫
function makeStyleGuide() {}
export default makeStyleGuide;
9、如果模塊默認輸出一個對象，對象名的首字母應該大寫
const StyleGuide = {
es6: {}
};
export default StyleGuide;
10、指令規範
指令有縮寫一律採用縮寫形式
// 推薦
:class="{'show-left'：true}"
@click="getListData"
// 不推薦
v-bind:class="{'show-left'：true}"
v-on:click="getListData"
11、v-for 循環必須加上 key 屬性，在整個 for 循環中 key 需要唯一
<!-- 推薦 -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
<!-- 不推薦 -->
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
12、避免 v-if 和 v-for 同時用在一個元素上（性能問題）
Props 規範
1、組件 props 原子化
2、提供默認值
3、使用 type 屬性校驗類型
4、使用 props 之前先檢查該 prop 是否存在
// bad 這樣做只有開發原型系統時可以接受
props: ['status']
// good
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
5、避免 this.$parent
6、調試信息 console.log() debugger 使用完及時刪除
7、除了三目運算，if,else 等禁止簡寫
// bad
if (true) alert(name);
console.log(name);
// good
if (true) {
alert(name);
}
console.log(name);
8、全局變量的位置
如無特殊情況，變量統一放到 data 內，避免組件重用時代碼不被執行
// 推薦
export default {
data() {
return {
today: new Date()
};
}
};
// 不推薦
const today = new Date();
export default {
data() {
return {
t: today
};
}
};
9、開啓 ESLint
目前廣泛使用的有三種有google標準、airbnb標準、standard標準
10、安裝
用 vue 腳手架初始化文件時，通過 vue-cli 的問答初始化 ESLint 的配置（推薦）