我的vue專案書寫規範
1、元件/例項的選項順序(同步官方)。官方連結
這是我們推薦的元件選項預設順序。它們被劃分為幾大類,所以你也能知道從外掛裡新增的新 property 應該放到哪裡。
- 副作用 (觸發元件外的影響)
- el
- 全域性感知 (要求元件以外的知識)
- name
- parent
- 元件型別 (更改元件的型別)
- functional
- 模板修改器 (改變模板的編譯方式)
- delimiters
- comments
- 模板依賴 (模板內使用的資源)
- components
- directives
- filters
- 組合 (向選項裡合併 property)
- extends
- mixins
- 介面 (元件的介面)
- inheritAttrs
- model
- props/propsData
- 本地狀態 (本地的響應式 property)
- data
- computed
- 事件 (通過響應式事件觸發的回撥)
- watch
- 生命週期鉤子 (按照它們被呼叫的順序)
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- 非響應式的 property (不依賴響應系統的例項 property)
- methods
- 渲染 (元件輸出的宣告式描述)
- template/render
- renderError
因此實際開發過程中用得比較多的選項順序如下
export default { name: 'demo', components: {}, directives: {}, filters: {}, extends: Object, mixins: [], props: {}, data() { return { } }, computed: {}, watch: {}, beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, activated() {}, deactivated() {}, beforeDestroy() {}, destroyed() {}, methods() {} }
2、元素 (包括元件) 的 attribute 應該有統一的順序(同步官方)。官方
這是我們為元件選項推薦的預設順序。它們被劃分為幾大類,所以你也能知道新新增的自定義 attribute 和指令應該放到哪裡。
- 定義 (提供元件的選項)
- is
- 列表渲染 (建立多個變化的相同元素)
- v-for
- 條件渲染 (元素是否渲染/顯示)
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- 渲染方式 (改變元素的渲染方式)
- v-pre
- v-once
- 全域性感知 (需要超越元件的知識)
- id
- 唯一的 attribute (需要唯一值的 attribute)
- ref
- key
- 雙向繫結 (把繫結和事件結合起來)
- v-model
- 其它 attribute (所有普通的繫結或未繫結的 attribute)
- 事件 (元件事件監聽器)
- v-on
- 內容 (覆寫元素的內容)
- v-html
- v-text
因此實際開發過程中用得比較多的元素特徵順序如下
- v-for
- v-if/v-show
- id
- ref/key/slot
- v-model
- class/:class/style/:style
- v-on
<div(元件同理)
v-for="(item, index) in items"
:key="index"
v-if="condition"
id=""
ref=""
key=""
slot=""
v-model="something"
class=""
:class=""
style=""
:style=""
v-on:event="handle"
></div>
3、css樣式書寫規範(參照官網以及某大公司的規範)
1、首先我們為CSS類命名時應使用lowercase-hyphenated
2、[建議] border / margin/ padding等縮寫會同時設定多個屬性的值,容易覆蓋不需要覆蓋的設定。如某些方向需要繼承其他宣告的值,則應該分開設定。
3、屬性書寫順序
[建議] 同一 rule set 下的屬性在書寫時,應按功能進行分組,並以 Formatting Model(佈局方式、位置) > Box Model(尺寸) > Typographic(文字相關) > Visual(視覺效果) 的順序書寫,以提高程式碼的可讀性。
解釋:
- Formatting Model 相關屬性包括:position / top / right / bottom / left / float / display / overflow 等
- Box Model 相關屬性包括:border / margin / padding / width / height 等
- Typographic 相關屬性包括:font / line-height / text-align / word-wrap 等
- Visual 相關屬性包括:background / color / transition / list-style 等
另外,如果包含 content 屬性,應放在最前面。
示例:
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
4 、清除浮動
[建議] 當元素需要撐起高度以包含內部的浮動元素時,通過對偽類設定 clear 或觸發 BFC 的方式進行 clearfix。儘量不使用增加空標籤的方式。
5、 !important
[建議] 儘量不使用 !important 宣告。
[建議] 當需要強制指定樣式且不允許任何場景覆蓋時,通過標籤內聯和 !important 定義樣式。
6、數值
[強制] 當數值為 0 - 1 之間的小數時,省略整數部分的 0。
7、長度
[強制] 長度為 0 時須省略單位。 (也只有長度單位可省)
8 、顏色
[強制] RGB顏色值必須使用十六進位制記號形式 #rrggbb。不允許使用 rgb()。
[強制] 顏色值可以縮寫時,必須使用縮寫形式。
[強制] 顏色值不允許使用命名色值。
[建議] 顏色值中的英文字符采用小寫。如不用小寫也需要保證同一專案內保持大小寫一致。
示例:
/* good */
.success {
background-color: #aca;
color: #90ee90;
}
/* good */
.success {
background-color: #ACA;
color: #90EE90;
}
/* bad */
.success {
background-color: #ACA;
color: #90ee90;
}
9、字型
[強制] 需要在 Windows 平臺顯示的中文內容,其字號應不小於 12px。
解釋:
由於 Windows 的字型渲染機制,小於 12px 的文字顯示效果極差、難以辨認。
[強制] font-weight 屬性必須使用數值方式描述。
解釋:
CSS 的字重分 100 – 900 共九檔,但目前受字型本身質量和瀏覽器的限制,實際上支援 400 和 700 兩檔,分別等價於關鍵詞 normal 和 bold。
瀏覽器本身使用一系列啟發式規則來進行匹配,在 <700 時一般匹配字型的 Regular 字重,>=700 時匹配 Bold 字重。
但已有瀏覽器開始支援 =600 時匹配 Semibold 字重 (見此表),故使用數值描述增加了靈活性,也更簡短。
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}
[建議] line-height 在定義文字段落時,應使用數值。
解釋:
將 line-height 設定為數值,瀏覽器會基於當前元素設定的 font-size 進行再次計算。在不同字號的文字段落組合中,能達到較為舒適的行間間隔效果,避免在每個設定了 font-size 都需要設定 line-height。
當 line-height 用於控制垂直居中時,還是應該設定成與容器高度一致。
10、變換與動畫
[強制] 使用 transition 時應指定 transition-property。
示例:
/* good */
.box {
transition: color 1s, border-color 1s;
}
/* bad */
.box {
transition: all 1s;
}
至於其他的縮排規則以及js書寫規範及美化我們交給交給格式化文件工具vetur外掛以及eslint解決就行了