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
1、首先, Jenkins从Gitlab或Github等git仓库拉取项目代码
2、对于前端项目使用npm install 下载依赖
3、使用webpack对项目进行打包 npm run build
4、将生成的dist文件夹打包传输到要部署的远程服务器
5、构建完成会将构建信息推送相关人的邮箱
3.3.3 CI/CD 持续集成和持续交付
CI_CD流程图.png
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属性，可清空。
网友评论