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