# 一、文件命名规范
## 1.1 文件夹以及文件命名
规则：用简短有意义的`英文`（不能出现中文命名）来命名。
1、文件夹名称全部小写。如需连接可使用中横线“-”连字符。
正例：
反例：
2、vue文件采用大驼峰形式。即第一个单词首字母大写，之后每个单词首字母大写。也可views —> 文件夹名称 —> Index.vue（文件夹可多级）
正例：
反例：
3、html、css、js文件命全部小写。如需连接可使用中横线“-”连字符。
正例：
反例：
4、图片命名规则：全部小写，如需要可用下划线“_”连字符。
正例：
反例：
## 1.2 vue文件内css的命名规则
规则：用简短有意义的英文来命名。如需连接可使用中横线“-”连字符。
1、规定html/vue的每一个容器都要加入对应的名字 ps（container一个页面只能有一个，如需所有的container有公共样式可如下图，如不需要可只保留对应的名字+container类名）
2、需加入scoped防止污染全局，如需覆盖框架样式加入::v-deep 即可。
## 1.3 vue文件内js的命名规则
1、常量命名有固定指意的全部大写，并用下划线分隔单词。无特定指意可采用小驼峰形式。
正例：
反例：
2、变量命名采用小驼峰且使用let。
正例：
反例：
3、Class、构造函数命名采用大驼峰。
正例：
反例：
4、函数命名采用小驼峰。
正例：
反例：
推荐：
| 动词 | 含义 | 返回值 |
| --- | ----------- | ----------------------- |
| can | 判断是否可执行某个动作 | true---可执行，false---不可执行 |
| has | 判断是否含有某个值 | true---含有此值，false---无此值 |
| is | 判断是否为某个值 | true---是此值，false---不是此值 |
| get | 获取某个或某些值 | ----- |
| set | 设置某个或某些值 | ----- |
5、组件命名采用大驼峰。
正例：
反例：
6、import及export进来的变量名采用大驼峰。
正例：
反例：
# 二、编码规范
## 2.1 sass 规范
### 2.1.1 Sass 目录规范
### 2.1.2 目录说明
1、common.scss
初始化样式、样式出口文件，要在入口文件App.vue引入。
2、vant-ui.scss
如果vant某些样式不是你需要的，在 vant-ui.scss 里可以重写来覆盖vant样式。
如果你只想重写当前组件的样式，可在直接在组件里重写，如设置了style的scoped属性导致修改样式无效，可以使用::v-deep ，方法如下：
3、mixin.scss
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（定义的@mixin，可理解为sass模块）引入到文档中，实例如下：
可向混入传递变量，实例如下：
常用内外边距及类名缩写列表
常用边距模块
配合循环语句和判断语句来匹配并引入。
CSS输出
4、transition.scss
如果你需要在多处使用同一个固定CSS3动画，统一写在 transition.scss，如：
5、utils.scss
工具样式文件，如果你需要在多处使用同一个固定样式时可以写在此文件中，如：
6、variables.scss
如需声明变量，统一写在 variables.scss，用 $ 加变量名 声明，如：
### 2.1.3 全局CSS样式
1、浮动、清除浮动
- .fl 左浮动
- .fr 右浮动
- .chearfix 清除浮动
2、字体样式
- .fs12 字体尺寸 12px
- .fs14 字体尺寸 14px
- .fs16 字体尺寸 16px
- .fs18 字体尺寸 18px
- .fw600 字体粗细 600
- .fwb 字体粗细 bold
3、布局定位
- .relative 相对于其正常位置进行定位
- .absolute 相对于 static 定位以外的第一个父元素进行定位
- .fixed 相对于浏览器窗口定位
- .mh-auto 块级元素水平居中
- .hide 元素隐藏，但仍占用空间
- .hidden 元素隐藏，不占用空间
- .flex 弹性盒模型布局，块级元素
- .inline-flex 弹性盒模型布局，内联块元素
- .inline-b 内联块元素，表现为同行显示并可修改宽高内外边距等属性
- .justify-content-c 弹性项目居中填充
- .align-items-c 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置
4、常用文字颜色
- .c-gray-base 文字颜色 #999
- .c-gray-dark 文字颜色 #666
- .c-gray-darker 文字颜色 #333
- .green 文字颜色 green
- .red 文字颜色 red
- .yellow 文字颜色 yellow
- .gray 文字颜色 gray
- .white 文字颜色 白色
4、背景颜色
- .bg-black 背景颜色 黑色 black
- .bg-white 背景颜色 白色 white
- .bg-none 背景颜色 透明 transparent
5、文字位置设置
- .text-left 左对齐
- .text-right 右对齐
- .text-center 居中对其
- .text-underline 文字下划线
6、垂直方向对齐方式
- .v-top 把元素的顶端与行中最高元素的顶端对齐 vertical-align: top
- .v-middle 把此元素放置在父元素的中部 vertical-align: middle
- .v-bottom 把元素的顶端与行中最低的元素的顶端对齐 vertical-align: bottom
- .v-baseline 默认，元素放置在父元素的基线上 vertical-align: baseline
7、单行省略
.ellipsis 单行省略
可根据宽度自适应显示文字长度
8、宽度、高度、内外边距、圆角弧度、透明度
- 我们在 variables.scss 文件里声明了** 宽度、高度、内外边距、圆角弧度、透明度** 常用的一些数值，以及一些类名缩写
- 在 mixin.scss 文件定义了混入函数，通过传参的方式，根据类名缩写及数值来匹配相应的样式。
- 并在样式出口文件 common.scss中引入，这样全局都可使用这些类名缩写来使用这些样式。
文档如下：
**宽度 、高度**
类名缩写：w，h
常用数值：40 50 60 70 80 86 100 110 120 140 150 155 160 180 192 200 220 260 280 315 325 350 400 440 445 450 550 700 1340
使用方法：类名 + 数值
例如：
宽度为100：
高度为100：
**圆角弧度**
类名缩写：radius
常用数值：1 2 3 4 5 6 7 8 9 10 12 15 18 20 50 100
使用方法：类名 + 数值
例如：
圆角弧度为10：
**透明度**
类名缩写：opacity
常用数值：0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9
使用方法：类名 + 数值
例如：
透明度为0.9：
**内外边距**
类名缩写：m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top, left, right, bottom
- m margin 外边距
- mv margin-top margin-bottom 上下外边距
- mh margin-left margin-right 左右外边距
- mt margin-top 上外边距
- ml margin-left 左外边距
- mr margin-right 右外边距
- mb margin-bottom 下外边距
- p padding 内边距
- pv padding-top padding-bottom 上下内边距
- ph padding-left padding-right 左右内边距
- pt padding-top 上内边距
- pl padding-left 左内边距
- pr padding-right 右内边距
- pb padding-bottom 下内边距
- top 定位属性 top
- left 定位属性 left
- right 定位属性 right
- bottom 定位属性 bottom
常用数值：0 1 2 5 6 8 9 10 12 15 20 25 30 35 40 45 50 60 80 86 90 100
使用方法：类名 + 数值
例如：
左右外边距为30：
上下内边距为30：
定位属性top为30：
### 2.1.4 使用实例
代码为：
输出为：
代码为：
输出为：
## 2.2 vue 编码规范
### 2.2.1 vue 文件基本结构
组件顶级元素顺序按 ``、`