规范目的
为提高团队协作效率
便于后期优化维护
输出高质量的文档（讨论即文档、注释即文档、代码即文档）
一 命名
1 项目命名
全部采用小写方式， 以下划线分隔。 例：
my_project_name
2 目录命名
2.1 文件夹
参照项目命名规则；
有复数结构时，要采用复数命名法。
scripts 、 styles 、 images 、 data_models
2.2 文件
2.2.1 JS文件命名
使用分隔符线
如果为单个单词，使用小写md5.js
resize-event.js
2.2.2 CSS, SCSS文件命名
css使用下划线
jdc.scss
jdc_list.scss
jdc_detail.scss
scss使用下划线开头
@import 引入的文件不需要开头的'_'和结尾的'.scss'；
/* not good */
@import "_dialog.scss";
/* good */
@import "dialog";
2.2.3 HTML文件命名
使用下划线
jdc.html
jdc_list.html
jdc_detail.html
scss使用下划线开头
@import 引入的文件不需要开头的'_'和结尾的'.scss'；
/* not good */
@import "_dialog.scss";
/* good */
@import "dialog";
2.3 组件
组件名为多个单词 （这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。）
- 基础组件名
比如 Base、App 或 V。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
- 单例组件名
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
- 紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
3 普通变量
命名方法 ：驼峰命名法
命名是复数的时候需要加s
4 常量
命名方法 : 全部大写
命名规范 : 使用大写字母匈牙利式命名法。
const MAX_COUNT = 10
const URL = 'https://www.shun178.com'
二 注释规范
务必添加注释列表
- 公共组件使用说明
- 各组件中重要函数或者类说明
- 复杂的业务逻辑处理说明
- 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用
- 了某种算法或思路等需要进行注释描述
- 多重 if 判断语句
- 注释块必须以/（至少两个星号）开头/
- 单行注释使用//
三 编码规范
1 指令规范
v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一
避免 v-if 和 v-for 同时用在一个元素上（性能问题）
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
网友评论