公司前端规范

前端规范

1,命名规范
目录 横线
组件名称 大驼峰
函数用 小驼峰
函数 动词+名称
字段用 下划线

类，目录名称, 尽量和后端保持一致
单词，简介，常用

设置 setXxx
获取 getXxx
判断 isXxx

js目录规划
lib
config
type.js
config.js
tool
func.js
request.js
storage.js
ser
user.js
cart.js
shop.js
base.js

2 常用单词

data常用单词
btnLoading:false, #按钮loading
isLoading:false, #loading
selectOptions:[], #下拉选项
form:{}, #表单数据对象
list:[], #列表数组
total:[], #总条数据
picsArr: [], #相册
images: [], #封面

method常用单词

列表

submit
getList
getInfo

del
changeStatus
changeSort
search
clear #
pageSize
page
resetRoute
resetForm

表单

:model="form" :rules="rules" ref="form"

getTree
getContent
reset
submit
getPic
getPics

组件方法 处理动作: handle+动作
handleChange
handleDel

3，组件
1,当前页面组件，写在当前目录下
2,公共组件,公共组件目录下
3，组件命名, 动词+名称,小驼峰,相关方法 组件名称+动词
4, 所有涉及单词，保持一致
5, 初始化方法 init， 父组件向子组件传值
6, 子组件向父组件传值, this.$emit调用父类方法,getQiyeInfo

<button @click="searchQiyeClick">
<searchQiye ref="searchQiye" @getQiyeInfo="getQiyeInfo" />
import searchQiye from "./searchQiye.vue";
searchQiyeClick(){
let data = [];
this.$ref['searchQiye'].init(data);
}
//this.$emit("getQiyeInfo",data);

4，代码优化原则, 相同代码只有一份
按需导入，懒加载

5, 样式，工具样式

6, 界面合理，美观