# 前端 Vue 开发规范

规范目的

为提高团队协作效率
便于后期优化维护
输出高质量的文档（讨论即文档、注释即文档、代码即文档）

一 命名

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 同时用在一个元素上（性能问题）

    

        {{ todo.text }}