目的
规范的目的是为了编写高质量的代码，提高代码质量和可读性，增强团队协作开发效率，统一编码风格规范
文档说明
本文旨在统一团队前端代码规范，结合团队日常业务需求以及团队日常开发过程中的总结而制定，如果发现错误敬请指正~
HTML规范
-
多特性分行写：
为提高可读性，组件应用时换行，按照ref、class、传入、传出顺序书写，如下：
<my-card-table
:little-title="'成品成分'"
:show-header-border="false"
:tableColumns="endSteel?.columns"
:tableData="endSteel?.datas"
>
</my-card-table>
-
代码嵌套
根据元素嵌套规范，每个块状元素独立一行，内联元素可选，如下：
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
-
区分v-show,v-if使用场景
v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
总结：切换频繁时使用v-show,否则使用v-if
-
注释规范
<!-- test注释 -->
<div class="test">
<!-- 组件注释 -->
<gdCustomTable ref="gdCustomTable" />
<!-- 其他注释 -->
<div>...</div>
</div>
CSS规范
css部分，因为样式有原生的 CSS 写法，也有使用预处理语言：Sass, Less，Stylus。所以情况比较多，也比较复杂。我们统一使用 Sass
-
用法规范
- 推荐使用直接子选择器；
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
- 使用混合（mixin）
根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段
// SCSS
/* flex布局 */
@mixin flex($justify:space-between, $align: center, $wrap: nowrap) {
display: flex;
justify-content: $justify;
align-items: $align;
flex-wrap: $wrap;
}
.jdc_1 {
@include flex;
}
.jdc_2 {
@include flex(space-between);
}
-
样式覆盖
组件内部需要覆盖UI框架样式，必须在最外层组件加类名，如下：
<template>
<div class="input-area-container">
<el-input class="name-input"></el-input>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.input-area-container {
.name-input {
.el-input__inner {
font-size: 16px;
}
}
}
</style>
JS规范
-
用法规范
- 规避 v-if 和 v-for 用在一起；
- 优先考虑三目运算符，但不要写超过3层的三目运算符；
- 对于无用代码须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码；
-
注释规范
函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。
命名规范
-
目录命名
按照小驼峰命名，首字母小写
- 项目文件夹：projectName
- 样式文件夹：css / scss
- 脚本文件夹：js
-
图片命名
图片使用img，图标使用icon
- img_功能/类型_编号
- icon_功能/类型_编号
-
文件命名
按照小驼峰命令，英文单词过长或超出2个以上，可缩略至前四位，如
// 业务统计
approvalStatistical
// 缩略
approvalStat
-
方法命名
method 方法命名不同于文件命名，尽量完整英文命名，语义表达需完整清楚
按照小驼峰命名法，可使用常见动词开头；
- can 判断是否可执行某个动作
- has 判断是否含有某个值
- is 判断是否为某个值
- get 获取某个值
- set 设置某个值
*变量： *使用驼峰式命名，优先使用let、const避免使用var
-
常用词
| 简写 | 说明 |
|---|---|
| get\set | 取值\给值 |
| add\remove | 增加\移除 |
| show\hide | 显示\隐藏 |
| view | 查看 |
| browse | 浏览 |
| edit | 修改 |
| save | 保存 |
| delete | 删除 |
| find | 查询 |
| undo | 撤销 |
| redo | 重做 |
| clean | 清除 |
| index | 索引 |
| observe | 观察 |
| send\receive | 发送\接收 |
| refresh\synchronize | 刷新\同步 |
项目结构
|-- api 所有api接口
| |-- https 封装的公用请求方法，除非必要不可修改，影响全局
|-- assets 静态资源，images, icons, styles等
| |-- images 全局公用图片
| |-- icons 全局公用icons
| |-- styles 全局公用样式
|-- components 公用组件
| |-- base 基础组件，导航，按钮，标签等组件
| |-- business 业务组件，封装可复用的页面或功能组件
|-- plugins 插件管理
|-- router 路由，统一管理
|-- store vuex, 统一管理
|-- utils 工具管理
| |-- utlis 公共 JS 工具函数
| |-- array 数组类工具函数
| |-- store 存储类工具函数
| |-- filters 过滤器工具函数
| |-- ...
|-- views 视图目录（所有业务逻辑的页面）
局部组件 在当前功能的目录新建 components 文件夹，所有声明的组件放在里面，采用大驼峰命名，放置位置如下：
src/views/user-info
├─ index.vue
└─ components/
├─ BaseInfo.vue
└─ UserInfo.vue
