# Vue开发编码规范

Vue是一套用于构建用户界面的渐进式框架。

vue官方风格指南 (opens new window)

# 目的

对公司内部使用Vue开发编程进行规范和统一，提高程序的可靠性、可读性、可维护性，提高团队开发效率。

# 基础规范

# 命名规范

# views命名

views 文件夹下面是由以页面为单位的vue文件或者模块文件夹组成的，放在 src 目录之下，与 components、assets 同级。

# views 下的文件夹命名

views 下面的文件夹代表着模块的名字

由名词组成（car、order、cart）
单词只能有一个（good: car order cart）（bad: carInfo carpage）
尽量是名词（good: car）（bad: greet good）
以小写开头（good: car）（bad: Car）

# views 下的 vue 文件命名

views 下面的 vue 文件代表着页面的名字，放在模块文件夹之下
只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 Login，Home
尽量是名词
大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）
名字至少两个单词（good: CarDetail）（bad: Car）
常用结尾单词有（Detail、Edit、List、Info、Report）
以 Item 结尾的代表着组件（CarListItem、CarInfoItem）

# vue 方法命名

# vue 方法放置顺序

components
props
data
created
mounted
activited
update
beforeRouteUpdate
metods
filter
computed
watch

1
2
3
4
5
6
7
8
9
10
11
12

# method 自定义方法命名

动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）
事件方法以 on 开头（onTypeChange、onUsernameInput）
init、refresh 单词除外
尽量使用常用单词开头（set、get、open、close、jump）
驼峰命名（good: getListData）（bad: get_list_data、getlistData）

# data props 方法注意点

使用 data 里的变量时请先在 data 里面初始化
props 指定类型，也就是 type
props 改变父组件数据基础类型用 $emit ，复杂类型直接改
不命名多余数据，现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 d，而不是每个字段都声明
表单数据请包裹一层 form

# 格式规范

代码缩进统一为2空格
文件头、方法、关键代码添加注释
符合eslint检查规范（解决eslint相关报错）
公共方法统一提取，放入utils中
公共组件统一提取，放入components中

# Vue 文件

# 整体文件格式

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'xxx'
}
</script>

<style lang=”less” scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# template

标签统一为小写字母+横线：div、app-info
无子元素的标签采用自闭写法：
使用Vue语法中的缩写方式：

v-bind:key--->:key
v-on:click--->@click

1
2

v-for必须设置key属性，且一般不为index。
可复用代码，提取公共组件

# script

书写顺序：

# style

尽量使用scope方式
命名使用小写字母+横线：top-div
每个css样式之间插入空行
最外部样式使用与组件名称命名相同的样式包裹：.app-info{}
避免组件间的样式冲突，scope方式下不会影响
尽量使用精准样式

background---->background-image、background-color

1

保持每行一个属性
color值统一小写，且尽量简写，#fafcfb，#ccc
公共样式可写入App.vue
注意less中样式嵌套的使用
伪类样式书写：

.top {
	&:hover {}
}

1
2
3

# modules.js文件

state：首字母小写驼峰命名，添加必要注释，给出默认值
mutations：大写字母+下划线命名：SET_NAME
actions：驼峰命名，需要返回或处理resolve和reject两种结果
getters：按module编写，每个module的参数写在一起，给出必要的注释