Vue多人协作开发规范统一指南

picture.image

祝各位读者端午节快乐

picture.image

最近公司活多，好长时间没有精下心来写文章了。公司刚分配了一个活，这个活是外包过来的，项目整体结构非常差，理解起来费劲。面对这种项目只能硬着头皮上了。

面对这种项目，首先得总体有个思路：将大模块拆分成小模块，一个一个的突破，找到其中之间每个组件的联系，这样写增加新的业务就上手容易一点了。

其实Vue项目，主要搞清楚这几点，上手相对容易一点。

1. 路由模块

2. 请求模块

3.状态管理模块

把以上3点搞清楚了，那么剩下的就是开发组件了。

每个团队开发规范不一样，个人开发更不一样。
如果当你接收一个外包项目，你得了解他的开发规范，组件命名，字段命名，方法名…….在熟悉他的规范的同时需要一定的时间成本
如果业界每个人都可以遵循官方提供的规范开发，大家都会受益，何乐而不为呢

下面我们来学习一下Vue 的开发规范

Vue 风格指南

组件命名

  
Vue.component('todo-item',{  
      
})  
  
  
export default {  
    name: 'TodoItem'  
}

Vue data 数据必须是一个函数

❝ 如果``data` 是一个对象时，所有Vue 实例都公用一份data，如只想改动某一块，所有模块都会跟着改变。

如何阻止呢，实现每个组件实例都可以管理自己的数据？

``在 JavaScript 中，在一个函数中返回这个对象就可以了：`

❞

  
Vue.component('some-comp', {  
  data: function () {  
    return {  
      foo: 'bar'  
    }  
  }  
})  
  
  
// In a .vue file  
export default {  
  data () {  
    return {  
      foo: 'bar'  
    }  
  }  
}

Prop 定义详细

❝ 在组件之间传递数据时：

父组件向子组件传递数据时，通过在子组件上动态绑定传值，然后在子组件中，通过Prop 来接收使用即可。

一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。

eg：例如，某个key 只能传递number类型，你传递过来的是 string 类型，这不就尴尬了。
  
// 正确做法  
props: {  
  status: {  
    type: String,   // 类型  
    required: true  // 必填  
  }  
}  
❞

Prop 大小写

❝ 「在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。」

❞

  
props: {  
  greetingText: String  
}  
  
  
<WelcomeMessage greeting-text="hi"/>

V-for 设置key的必要性

❝ 在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。

❞

  
<ul>  
  <li  
    v-for="todo in todos"  
    :key="todo.id"  
  >  
    {{ todo.text }}  
  </li>  
</ul>

永远不要把 v-if 和 v-for 同时用在同一个元素上。

❝

当 Vue 处理指令时， v-for 比 v-if 具有更高的优先级

一般要用到 v-for 与 v-if 连用时，会将 v-for 的数据进行 computed 处理后返回对应的数据来使用

❞

  
computed: {  
  activeUsers: function () {  
    return this.users.filter(function (user) {  
      return user.isActive  
    })  
  }  
}  
  
  
<ul>  
  <li  
    v-for="user in activeUsers"  
    :key="user.id"  
  >  
    {{ user.name }}  
  </li>  
</ul>

❝

v-for 与 v-if 分开使用，一般将 v-if 放在 v-for 的最外层

❞

  
<ul v-if="shouldShowUsers">  
  <li  
    v-for="user in users"  
    :key="user.id"  
  >  
    {{ user.name }}  
  </li>  
</ul>

为组件样式设置作用域

❝ 在为组件写CSS 样式时，如果不为你单个组件样式添加样式作用域的话，它会影响全局样式。

在App.vue 顶级组件中，它的样式是全局的.

如何解决单组件样式影响全局呢？官方提供了3中解决方案

scoped Style 中加入 scoped

使用CSS Modules 来设定CSS 作用域`

基于 class 的类似 BEM的策略

❞

  
// 1, scoped  
  
<template>  
  <button class="button button-close">X</button>  
</template>  
  
<!-- 使用 `scoped` attribute -->  
<style scoped>  
.button {  
  border: none;  
  border-radius: 2px;  
}  
  
.button-close {  
  background-color: red;  
}  
</style>  
  
  
  
  
//2. CSS Modules  
  
<template>  
  <button :class="[$style.button, $style.buttonClose]">X</button>  
</template>  
  
<!-- 使用 CSS Modules -->  
<style module>  
.button {  
  border: none;  
  border-radius: 2px;  
}  
  
.buttonClose {  
  background-color: red;  
}  
</style>  
  
  
//3.BEM  
  
<template>  
  <button class="c-Button c-Button--close">X</button>  
</template>  
  
<!-- 使用 BEM 约定 -->  
<style>  
.c-Button {  
  border: none;  
  border-radius: 2px;  
}  
  
.c-Button--close {  
  background-color: red;  
}  
</style>

单文组件文件命名大小写驼峰命名

  
1. 第一种方式  
components/  
|- MyComponent.vue  
  
  
2. 第二种方式  
components/  
|- MyComponent.vue

基础组件命名

❝ 「应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。」

❞

  
components/  
|- BaseButton.vue  
|- BaseTable.vue  
  
  
  
components/  
|- AppButton.vue  
|- AppTable.vue  
|- AppIcon.vue  
|- BaseIcon.vue  
  
  
  
components/  
|- VButton.vue  
|- VTable.vue  
|- VIcon.vue

模板中组件名大小写

❝ 单文件组件模板 ``PascalCas*`

Dom 模板中 kebab-case

❞

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

「多个 attribute 的元素应该分多行撰写，每个 attribute 一行。」

  
<img src="https://p3-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/5dc170bad66d4355b0196728fed6a1a7~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1753680459&x-signature=FEr%2BHY3MGKb%2F6n20ASTYRkxWpXU%3D" alt="img" />  
  
  
  
<img src="https://p3-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/5dc170bad66d4355b0196728fed6a1a7~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1753680459&x-signature=FEr%2BHY3MGKb%2F6n20ASTYRkxWpXU%3D" alt="img" />

让计算属性更简单

❝

当每个计算属性都包含一个非常简单且很少依赖的表达式时，撰写测试以确保其正确工作就会更加容易。

简化计算属性要求你为每一个值都起一个描述性的名称，即便它不可复用。这使得其他开发者 (以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。

❞

  
让 Computed 更精简，直观  
  
computed: {  
  basePrice: function () {  
    return this.manufactureCost / (1 - this.profitMargin)  
  },  
  discount: function () {  
    return this.basePrice * (this.discountPercent || 0)  
  },  
  finalPrice: function () {  
    return this.basePrice - this.discount  
  }  
}

指令缩写

❝ 动态绑定属性 v-bind ======= ：

动态绑定事件 v-on ======= @

动态绑定插槽 v-slot ====== #

官方建议：要么都用简写，要么都用v- 开头的，统一规范。

❞

  
<input  
  :value="newTodoText"  
  :placeholder="newTodoInstructions"  
>  
        
<input  
  @input="onInput"  
  @focus="onFocus"  
>    
        
        
        
绑定插槽  
<template #header>  
  <h1>Here might be a page title</h1>  
</template>  
  
<template #footer>  
  <p>Here's some contact info</p>  
</template>  
  
  
  
<template v-slot:header>  
  <h1>Here might be a page title</h1>  
</template>  
  
<template v-slot:footer>  
  <p>Here's some contact info</p>  
</template>

减少在 `scoped` 中使用元素选择器

❝ 在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

❞

  
❌不要这样使用  
<template>  
  <button>X</button>  
</template>  
  
<style scoped>  
button {  
  background-color: red;  
}  
</style>  
  
  
  
  
  
✔正确使用  
<template>  
  <button class="btn btn-close">X</button>  
</template>  
  
<style scoped>  
.btn-close {  
  background-color: red;  
}  
</style>