# 前端 Vue 开发规范

2020-02-27  本文已影响0人  净瞎闹儿

规范目的

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

一 命名

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'

二 注释规范

务必添加注释列表

三 编码规范

1 指令规范

v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一
避免 v-if 和 v-for 同时用在一个元素上(性能问题)

<ul>
    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
    </li>
</ul>
上一篇下一篇

猜你喜欢

热点阅读