一、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