3 流程规范

3.1. 开发流程

前端开发流程图.png

3.2. git工作流程

git工作流程-2.png

git commit 规范：

 'build', //构建相关
  'ci', // 自动化流程配置相关
  'chore',// 构建过程或辅助工具的变动
  'docs',// 文档相关
  'feat', // 新增功能
  'fix',// 修复bug
  'perf',// 性能相关
  'refactor',// 重构
  'revert',// 回滚
  'style',// 修改代码格式，不影响代码逻辑（注意,不是样式的修改）
  'test' // 测试相关

3.3. 部署流程

3.3.1 手动部署

手动部署流程图.png

本地部署流程

1、使用webpack对项目进行打包 npm run build

2、将生成的dist文件夹传输到nginx代理的文件夹中。

3.3.2 自动部署

自动部署流程图.png

jenkins构建流程

1、首先, Jenkins从Gitlab或Github等git仓库拉取项目代码

2、对于前端项目使用npm install 下载依赖

3、使用webpack对项目进行打包 npm run build

4、将生成的dist文件夹打包传输到要部署的远程服务器

5、构建完成会将构建信息推送相关人的邮箱

3.3.3 CI/CD 持续集成和持续交付

CI_CD流程图.png

CI/CD 的具体流程

1、在代码提交之后，CI 系统会自动通过 webhook 检测到代码变更，自动触发 CI 流程。

2、然后会进行静态代码检测，通常是进行一些快速的错误检查过程，比如语法检查，如果有错误就直接终止流程。

3、在进行完基础的代码检查之后，会进入自动构建环节，比如要进行代码效验、代码压缩、自动化测试等操作。

4、在构建完成之后，会进行一些回归测试、自动化测试、集成测试以及压力测试等。

5、在完成了必要的测试工作之后，就可以将代码部署到对应的环境中，在部署到生产环境之前，应该先部署在测试环境中再次验证。在部署到生产环境应使用对应的部署策略：蓝绿部署、灰度部署等。

6、在部署阶段，我们还要对项目的各个指标进行监控，出现异常及时做回滚操作。

4 UI设计规范

4.1 elementUI 设计原则

4.2 设计元素规范

基础设计元素为抽象出来的最底层的设计元素，包括标准色、尺寸、文字、边距、间距、圆角、动画等。基础设计元素是页面展示的基础，决定了我们项目页面的基调。因为其在最底层，所以理论上应该是在前端开始开发项目前就已经确定好内容。基础设计元素规范的质量直接影响了后续前端开发的效率。

下图列举了基础设计规范的具体内容，主要包括标准色、文字、圆角、边距、间距和动画：

设计元素规范.drawio.png

4.3 后台管理界面规范

后台管理页面规范是基于elementUI设计和设计元素规范的基础上，定制后台管理界面规范，是为了统一后台管理界面样式，保持一种统一对外输出界面。提升用户视觉体验。主要包括layout 主题 和页面元素组件设计。

1、layout主题：

菜单栏：

$menuText 菜单文字颜色

$menuActiveText 菜单文字选中颜色

$menuBackground 菜单背景

$menuHover 菜单鼠标悬停

$subMenuBackground子菜单背景

$subMenuHover 子菜单鼠标悬停

$sideBarWidth 菜单宽度

导航栏：

$navbarBackground 导航栏背景颜色

$navbarColor 导航栏字体颜色

$navbarHeight 导航栏高度

2、页面元素组件

页面边距: 15px

页面颜色: #f7f7f7

表单：尺寸：默认/40px

间距：8px

提交/搜索按钮：type：primary

提交按钮带加载状态：loading

表格: 样式：带边框，默认左对齐，带加载状态

当内容过长被隐藏时显示tip：show-overflow-tooltip

操作按钮：type：text/primary 尺寸：small/32px 间距：4px 删除按钮：type：danger

分页： 样式：显示总条数，上一页，下一页，带背景，前往页数

交互：Dialog 对话框：禁止点击空白处关闭弹框。

Input 输入框: 默认加上 clearable属性，可清空。

Select 选择器：接口获取的数据比较多时，可以利用搜索功能快速查找选项。加上 clearable属性，可清空。