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

一、Vie编码基础

程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了想说mmp，
那我们就来学习一下规范的代码怎么写的吧

以下来自B站的学习视频：前端必备-阿里大厂前端开发规范！

vue项目规范以 Vue 官方规范（https://cn./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

5、在 template 模板中使用组件，应使用 PascalCase 模式，并且使用自闭合组件

正例：

<!-- 在单文件组件和字符串模板中 --><MyComponent/>
    <!-- 在 DOM 模板中 或者 在所有地方 --><my-component></my-component>

反例：

<!-- 在单文件组件和字符串模板中 --><myComponent/>

6、组件的 data 必须是一个函数。

正例：

// In a .vue fileexport 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