# 前端规范

必须保证eslintrc不报错误和警告

编码统一为utf-8;

编码必须格式化, 比如缩进

tab统一为两个空格

vue文件代码结构必须统一如下:

<html>html代码<html>

<javascript>javascript代码</javascript>

<styles>css样式代码</styles>

# 文件命名规范

# 驼峰式命名法介绍

Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo

Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

# 文件资源命名

文件名不得包含空格

文件命名遵循小驼峰式命名法

vue组件命名遵循大驼峰式命名法,页面vue文件除外

# HTML规范

html需要遵循语义化,避免错误使用标签,避免不必要的代码,如行内元素和块元素的使用

避免不必要的代码嵌套

标签属性的定义,确保全部使用双引号,不得使用单引号

不在元素上使用 style 属性

ID需确保项目唯一,并用小驼峰式命名

class命名尽量直接使用常用名词,如使用常用名词(如:name,title等),写样式必须有两层嵌套,避免样式冲突

class命名用中划线( - )链接单词

# CSS样式规范

公用样式需要根据作用区分文件维护

书写代码前, 考虑并提高样式重复使用率;

充分利用html自身属性及样式继承原理减少代码量
element-ui.scss // 用于覆盖element-ui样式的
mixin.scss // 公用基础类
variables.css // 公用样式变量,如主题色等,方便后面调整样式
确认避免重复样式使用

不得直接使用常用名词命名等class,需要嵌套使用

选择器(包括伪类)嵌套不得多于4层

不得使用important, 除非用于覆盖第三方样式

# javascript规范

命名语义化,可读性强

注意规范添加注释

避免全局命名空间污染

常量命名: 使用大写字母和下划线来组合命名，下划线用以分割单词
const MAX_COUNT = 10;
const URL = 'http://www.baidu.com';
变量命名: 小驼峰式命名

私有属性和方法同样遵循小驼峰式命名,并且需要下划线( _ )开头
function Student(name) {
  var _name = name;  // 私有成员

  // 公共方法
  this.getName = function() {
    return _name;
  }
  // 公共方式
  this.setName = function(value) {
    _name = value;
  }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的
函数命名: 小驼峰式命名,用户主动调用的方法需要加handle开头,如下
<button @click="handleSubmit">提交</button>
function handleSubmit() {
  console.log('提交表单')
}

# VUE规范

vue 主页面文件一般使用小驼峰式命名,组件vue文件使用大驼峰式命名

路由直接映射到页面目录,ssr自动生成路由的项目除外

路由不得用驼峰式命名,需要驼峰式命名的要拆分为多级,如: /courseList 应改为/course/list

功能组件存放在页面目录即可,通用组件存放在components目录

文件目录的文件夹不得使用驼峰式命名,需要驼峰命名的,应当拆分多级目录,,如: courseList 应改为course/list

组件需要有注释说明组件作用

data变量需要做好归类,如下
data() {
  return {
    map: {},  // 列表页面筛选条件集合
    page: {},  // 分页参数集合,多个分页可以后面加别名,如: pageUser
    ctrl: {},  // 页面控制(Control)集合,用于控制模块显示隐藏等操作,太多控制属性可以加别名
    opts: {}, // 页面下拉菜单的枚举列表
  }
}

# 页面规范

UI尺寸统一使用small规格

需要保证页面规整,美观

form表单页面的每个选项都要统一对齐

使用百分比单位时,需要调整不同浏览器尺寸下的正常显示

页面按钮统一使用plain风格的按钮,注意按钮类型的使用,danger级别的按钮操作必须使用确认弹窗

dialog对话框和tab页面的使用: 一般展示八个简单选项内容的组件用dialog弹窗展示,多数据或者内容比较复杂的使用tab页面展示

dialog对话框一般竖型布局宽度固定600px,横向布局一行最多两个选项,宽度固定900px

存在多层dialog对话框嵌套的,第二层对话框的尺寸要比上一级小40px,如此类推

所有应用(移动端,管理后台,web)端的确认提示框的确认按钮在右边,取消按钮在左边