前端代码规范（阿里） --- Vue

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

<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

正例：

    .btn-close {
		font-size: 16px;
    }

9、如果特性元素过多，应主动换行

正例：

(二) 模板中使用简单的表达式

组件模板中应该只包含简单的表达式，如果有复杂的表达式，应该使用计算属性或法

正例：

{{ 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:) 应该要么都用要么都不用。

(四) 标签顺序保持一致

(五) script标签内部解构顺序

components --> props --> data --> computed --> watch --> filter --> 钩子函数 --> methods