前端书写规范

前端开发规范：

一、vue 页面命名

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

由名词组成（car、order、cart）

单词只能有一个

尽量是名词（car）

以小写开头（car）

views 下的文件夹命名

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

.vue 文件放在模块文件夹之下

模块名尽量是名词

大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）

名字至少两个单词（CarDetail）

常用结尾单词有（Detail、Edit、List、Info、Report）

src assets ... components ... views car CarEdit.vue CarList.vue CarDetai.vue user UserDetail.vue UserEdit.vue UserPasswordRest.vue customer CustomerCardItem.vue CustomerList.vue

二、vue 组件命名

基础组件：使用饿了么 element-ui 框架封装的基础组件 el-xxx

通用组件：

components 文件夹下；文件夹命名：组件类型（dialog）文件命名：详细的功能 + 组件类型 （FormDialog）

普通组件：放在页面的文件夹下

src assets ... components dialog DialogForm.vue DialogList.vue DialogBtn.vue views ...

三、class 类名

通用组件 class 命名

通用组件样式命名：cm-模块-模块功能<div class="cm-dialog-buttton"> <div class="cm-dialog-title"></div> <div class="cm-dialog-content"></div> <div class="cm-dialog-btn"></div> </div>

普通页面 + 普通组件 class 命名

通用样式： cc-布局类型_类型描述（一级）

如果是二级类，即存在上级父类，命名方式：cc-布局类型__类型描述

<div class="cc-text_strong"></div> <div class="cc-cells"> <div class="cc-cells__title"></div> <div class="cc-cell__content"> <div class="cc-cell"> <div class="cc-cell__hd"></div> <div class="cc-cell__bd"></div> <div class="cc-cell__ft"></div> </div> </div> </div>

普通样式：sw-模块-模块描述

<div class="sw-account"> <div class="sw-account-title"></div> <div class="sw-account-content"> <div class="sw-account-row"> <div class="sw-account-row-item"></div> <div class="sw-account-row-item"></div> <div class="sw-account-row-item"></div> </div> </div> </div>

高效复用样式： 属性名首字母 + 横线 + 属性值首字母

<style> .d-ib { display: inline-block; } .ta-c { text-align: center; } .ml-10 { margin-left: 10px; } </style> <div class="d-ib"> <div class="ta-c ml-10"></div> </div>

样式书写规则：

顺序：普通样式 + 布局样式 + 高效复用样式

<div class="sw-account cc-cells"> <div class="sw-account-title cc-cells__title ta-c"></div> <div class="sw-account-content cc-cells__content"> <div class="sw-account-row cc-cell ml-10"> <div class="sw-account-row-item cc-cell__hd"></div> <div class="sw-account-row-item cc-cell__bd"></div> <div class="sw-account-row-item cc-cell__ft"></div> </div> </div> </div>

sass 嵌套：根元素样式 + 当前元素父级样式 + 当前元素样式

.sw-account { .sw-account-row .sw-account-item { /* 样式内容 */ } }

四、事件命名

动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）

ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）

事件方法以 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 请求数据用上 isLoading、isError 变量

不命名多余数据，现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 d，而不是每个字段都声明

表单数据请包裹一层 form

五、全局变量命名

$_ + name

Vue.prototype.$_api = api;

六、路由

路由命名规范：path 驼峰式命名

一般是页面 文件夹/文件 名称，转换为驼峰式。

七、注释

js 注释位置在需要注释的语句上方顶格