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

祝各位读者端午节快乐

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

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

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

1. 路由模块
面试

2. 请求模块微信

3.状态管理模块app

把以上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://vuejs.org/images/logo.png"
  alt="Vue Logo"
>



<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

让计算属性更简单

❝

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

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

❞

让 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>