参考
Vue官方风格指南 https://vuejs.bootcss.com/style-guide/
根据项目开发实际总结
速览
- 串式 (kebab-case)
- 目录名
- 普通文件名
- 事件名
- HTML（tag、id、class、attribute/prop）
- 大驼峰 (CamelCase)
- 小驼峰 (lowerCamelCase)
- 全大写+下划线 (CONST_VARIABLE)
命名法简介
小驼峰命名法 (lowerCamelCase)
1
2
| 第一个单词以小写字母开始，后续单词首字母大写：
例如：dialogDrawerModal、flowChart
|
大驼峰命名法 (CamelCase)
1
2
| 每一个单词的首字母都采用大写字母：
例如：DialogDrawerModal、FlowChart
|
串式命名法 (kebab-case)
1
2
| 各个单词之间通过连字符“-”连接：
例如：dialog-drawer-modal、flow-chart
|
具体规范
目录/普通文件
1
2
3
4
5
6
7
8
9
10
| 强制使用：串式命名法
命名规则：
1、文件名不得含有空格
2、目录根据实际情况可使用复数，但文件名通常不应使用复数。
示例：pages/
|- login
|- system-manage
|- work-bench
|
组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| 组件名：大驼峰命名法
Prop： 小驼峰（内部） 串式（外部）
其它： 串式
命名规则：
1、组件名应尽量语义化，见名知义，不要怕名字长
2、联系紧密的组件应当以一个相同的特定前缀开头
3、基础组件或通用组件, 名称统一以"CC"开头，其它业务组件不限制。
4、组件内声明Prop时使用小驼峰命名，html中引用prop时使用串式命名。应尽量简洁、一致(prop: ['id','show'])，布尔类型prop通常无需添加is前缀。
5、自定义事件名采用串式命名，应尽量简洁、一致（change,close,success)
6、在html模板中引用组件时，建议使用串式命名法(dialog-drawer-modal)
组件示例：
components/
|- <CCDialog.vue
|- CCCompactInput.vue
|- CCCompactSelect.vue
组件反例：
components/
|- Modal.vue
|- DialogTemplate.vue
Prop示例：
<custom-card
:show="show"
:data-list="list"
@success="onSuccess">
</custom-card>
Prop反例：
<custom-card
:isShow="show"
:dataList="list"
@aeSucc="onSuccess">
</custom-card>
|
UTILS、STORE、ROUTER
1
2
3
4
5
6
7
8
9
10
11
12
13
| 强制使用：串式命名法
命名规则：
2. 使用缩写时应为常见缩写
3. 文件名中不应再包含.util/.store/.router
示例：util/
|- time.js
|- cache.js
反例：util/
|- time.util.js
|
变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 强制使用：
变量命名：小驼峰命名法
命名规则：
1、hasXxx 判断是否存在某个值 true:存在 false:不存在
2、isXxx 判断是否为某个值 true:是 false:否
3、dataList 数据列表
4、根据需要, 适当使用复数
5、命名遵循语义化规范，见名知义
示例：src/
|- isShow
|- isVisible
|- hasToken
反例：show1 show2 show3
|
函数
1
2
3
4
5
6
7
8
9
10
11
12
| 强制使用：小驼峰命名法
命名规则：
1、前缀以 handle/on 开头代表 => 处理事件
2、前缀以 get 开头代表 => 获取数据
3、前缀以 set 开头代表 => 设置数据
示例：methods/
|- handleSearch(){},
!- onSubmit(){},
|- getTableDataList(){},
|- setCurrentChangeData(){}
|
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 强制使用：串式命名法
命名规则：
1. 适用于class、id、tag、attribute/prop
2. 应该尽量简洁、明确、语义化
3. 禁止使用中文拼音
示例：HTML/
|- <div class="user-page"
:show-title="showTitle"
@success="onSuccess"
@before-upload="onBeforeUpload">
|- <div class="user-body">
!- ...
!- </div>
!- </div>
|
