前端开发规范:
一、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 注释位置在需要注释的语句上方顶格