一、Vie編碼基礎
vue項目規範以 Vue 官方規範(https://cn.vuejs.org/v2/style-guide/)中的A規範爲基礎
(一) 組件規範
1、組件名爲多個單詞
組件名應該始終是多個單詞的,且命名規範爲 KebabCase
格式
這樣做可以避免跟現有的以及未來的 HTML 元素相沖突,因爲所有的 HTML 元素名稱都是單個單詞的。
正例:
export default {
name: 'TodoItem',
...
}
反例:
export default {
name: 'Todo',
// ...
}
Vue.component('todo', {
// ...
})
2、組件名稱爲 pascal-case 格式
正例:
my-component.vue
反例:
myComponent.vue
3、爲基礎文件名爲 base開頭,使用完整單詞
正例:
base-button.vue
反例:
MyButton.vue
4、和父組件緊密契合的子組件以父組件名爲前綴名
父組件:todo-list.vue
正例:
todo-list-item.vue
todo-list-button.vue
反例:
todoItem.vue
程序員寫好看的代碼,不亞於寫一行好看的字
好看的代碼總是讓人心曠神怡,
不好,不規範的代碼,讓人看了想說mmp,
那我們就來學習一下規範的代碼怎麼寫的吧
以下來自B站的學習視頻:前端必備-阿里大廠前端開發規範!
5、在 template 模板中使用組件,應使用 PascalCase 模式,並且使用自閉合組件
正例:
<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 或者 在所有地方 -->
<my-component></my-component>
反例:
<!-- 在單文件組件和字符串模板中 -->
<myComponent/>
6、組件的 data
必須是一個函數。
正例:
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
反例:
export default {
data: {
foo: 'bar'
}
}
7、Props定義應該儘量詳細
- 命名:使用cameCase駝峯命名
- 必須指定類型
- 必須加上註釋,表明其含義
- 必須加上
require
或者default
,兩者二選一 - 如果業務需要,必須加上
validator
驗證
正例:
props: {
// 組件狀態,用於控制組件的顏色
status: {
type: String,
required: true,
validator: function (value) {
return {
'succ',
'info',
'error'
}.indexOf(value) !== -1
}
}
}
8、爲組件樣式設置作用域
寫CSS樣式時,加上 作用域 scope
正例:
<stype scoped>
.btn-close {
font-size: 16px;
}
</style>
9、如果特性元素過多,應主動換行
正例:
<MyConponent foo="a" bar="b"
baz="z" />
(二) 模板中使用簡單的表達式
組件模板中應該只包含簡單的表達式,如果有複雜的表達式,應該使用計算屬性或法
正例:
<!-- 在模板中 -->
{{ normalizedFullName }}
// 複雜表達式已經移入一個計算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
(三) 指令使用縮寫形式
指令縮寫 (用 :
表示 v-bind:
、用 @
表示 v-on:
和用 #
表示 v-slot:
) 應該要麼都用要麼都不用。
(四) 標籤順序保持一致
<template>...</template>
<script> ... </script>
<style> ... </style>
(五) script標籤內部解構順序
components --> props --> data --> computed --> watch --> filter --> 鉤子函數 --> methods