前端开发规范及自定义组件规范
基本规范 缩进：统一两个空格缩进，不要使用 Tab 或者 Tab、空格混搭
HTML规范 html属性使用双引号（""），比如：
小明
嵌套时使用单引号（’’），比如：
小明
如果需要展示双引号，可以使用转义()，比如：<p title=“姓名是"小明”">
属性命名使用短横线命名（html属性不区分大小写，不要使用驼峰式命名），比如：
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布尔型属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值
JS规范 变量定义：使用const定义常量，let定义局部变量，尽量不用var 使用 Camel 命名法 行位不需要加分号（;） js字符变量赋值单引号（’’），如果遇到嵌套则外层单引号，内层双引号，如const x = ‘这是"测试"数据’ 如果需要展示单引号，可以使用转义（），比如：const showName = ‘姓名是’小明’’ 常量使用全部字母大写，单词间下划线分隔的命名方式 如果变量是一个布尔值，变量名最好加上 is、has 或 can 作为前缀 取任何属性之前应判断对象是否为空，比如const name = user && && 取数组值前应先判断非空以及数组长度，比如：const name = names && names.length > 1 ? names[1] : null 数组遍历 arr.forEach arr.map arr.filter（过滤） arr.every（与） arr.some（或） JSON遍历 for … in
样式规范 使用scss，适应换肤和调整字体大小 换肤（暂不考虑换肤，但样式规则需要遵循） ElementUI使用以下变量定义颜色 $–color-primary：主题色（“409EFF”, “64,158,255”） $–color-primary-light-1：（53a8ff） $–color-primary-light-2：（66b1ff） $–color-primary-light-3：（79bbff） $–color-primary-light-4：（8cc5ff） $–color-primary-light-5：（a0cfff） $–color-primary-light-6：（b3d8ff） $–color-primary-light-7：（c6e2ff） $–color-primary-light-8：（d9ecff） − − c o l o r − p r i m a r y − l i g h t − 9 ： （ e c f 5 f f ） m i x ( --color-primary-light-9：（ecf5ff） mix( −−color−primary−light−9：（ecf5ff）mix(–color-black, $–color-primary, $–button-active-shade-percent)：（3a8ee6）
具体定义： 字体颜色： − − c o l o r − t e x t − p r i m a r y 边 线 颜 色 ： --color-text-primary 边线颜色： −−color−text−primary边线颜色：–border-color-base 超链接颜色： − − l i n k − c o l o r 超 链 接 h o v e r ： --link-color 超链接hover： −−link−color超链接hover：–link-hover-color
示例： &:hover, &:focus { color: $–color-primary; border-color: $–color-primary-light-7; background-color: KaTeX parse error: Expected EOF, got } at position 26: …imary-light-9; }̲ &:active { col…–color-black, $–color-primary, − − b u t t o n − a c t i v e − s h a d e − p e r c e n t ) ; b o r d e r − c o l o r : m i x ( --button-active-shade-percent); border-color: mix( −−button−active−shade−percent);border−color:mix(–color-black, $–color-primary, $–button-active-shade-percent); }
遵循BEM规范（ 特定样式不需要加浏览器前缀 所有颜色定义，均应从variables.scss里面获取
组件规范 命名：定义组件文件夹，文件夹名称为有意义的，比如Table，文件夹下定义index.vue，可根据需要放置其他文件 组件格式：需定义name，格式为BvXxx，比如BvTable 私有变量、方法命名规则为：
__xx__
页面引用： 引入组件（<script>），比如：
import BvExample from @/components/Example
注册组件（<script>），比如：
components: { BvExample }
使用组件（<template>），比如：
<bv-example />
组件注册 常用组件在plugins下面全局注册 不常用组件，在调用的vue文件中通过components进行局部注册 样式 组件的样式定义在components.scss 弹窗 弹窗组件需要设定按esc键和点击遮罩不关闭
