基本规范
缩进:统一两个空格缩进,不要使用 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 && user.info && user.info.name
取数组值前应先判断非空以及数组长度,比如: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规范(http://www.cnblogs.com/ChengWuyi/p/5667945.html)
特定样式不需要加浏览器前缀
所有颜色定义,均应从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键和点击遮罩不关闭