Vue多人协作开发规范统一指南
祝各位读者端午节快乐
最近公司活多，好长时间没有精下心来写文章了。公司刚分配了一个活，这个活是外包过来的，项目整体结构非常差，理解起来费劲。面对这种项目只能硬着头皮上了。
面对这种项目，首先得总体有个思路：将大模块拆分成小模块，一个一个的突破，找到其中之间每个组件的联系，这样写增加新的业务就上手容易一点了。
其实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://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>
腾讯云开发者
