前端开发规范

1.开发规范

1. 编码规范，英文版地址
2. 遵循vue风格指南
3. 完全了解业务的前提下再进行开发
4. 开发前编写开发文档，开发中严格遵循开发文档要求
5. 统一采用Eslint规范代码风格
6. 将面向对象思想、设计模式贯穿到开发中
7. 常用组件要进行封装

---

1.1插件使用规范

1. 不要引入不必要的插件
2. 确实需要引入时，考虑按需引入
3. 尽量不要使用JQuery等需要操作DOM来在更新状态的插件
4. 使用vuex状态管理时需要考虑必要性：不要为了使用vuex而使用vuex
5. 尽量不要自己造轮子

---

1.2.组件使用规范

字体

统一使用微软雅黑

Icon

优先使用字体图标，（不能满足需求时，采用切图）

image

1. 考虑是否需要增加onerror状态下的显示状态
2. 考虑适配问题

颜色

考虑是否需要在选中，激活状态下增加区分效果

Button

1. 有查询等网络请求操作时，使用disabled属性，避免重复点击
2. 根据用户习惯，弹窗footer中“确定”按钮在“取消”左侧
3. 考虑是否需要增加必要的图标，使按钮更形象

Input输入框

1. 类型限制，（数字类型（只允许输入数字）、金额类型（小数位控制））
2. 长度限制
3. 是否需要 clearable
4. 是否需要自动获取焦点（包含其他操作结束后，焦点会自动回到输入框）
5. 是否需要选中并覆盖输入框中的值
6. 是否需要表单验证、正则验证
7. 多个输入框，是否需要支持，通过键盘操作焦点上下左右切换
8. 是否需要支持键盘操作，比如：Enter键，作为确认操作
9. 绑定model是否需要增加修饰符（trim、number）限制
   ★★★★★ 除了登录时候需要记住密码，其他情况禁止出现保存密码或者更新密码弹窗，非密码类型输入框禁止被自动填充。

Select 选择器

1. 只有一个候选项时，直接展示到选项中
2. 考虑是否需要支持clearable
3. 有查询等网络请求操作时，使用disabled属性，禁止操作

Table表格

1. 数字类（数量、比例）、金额类的，均居右展示
2. 表格中文字较长的，hover时提示文字显示全

选择器 （时间、日期选择器）

1. 考虑是否需要禁止输入
2. 考虑是否需要clearable

Dialog

1. 增加宽度高度限制，支持不同分别率
2. 考虑是否会影响父布局
3. 考虑什么时候进行关闭（点遮罩层、键盘ESC）
4. 异常状态下，弹窗是否会自动关闭

提示

1. 给与必要的提示
2. 提示的正确性、严谨性（不要有错别字，要易于理解）
3. 尊重用户习惯，比如：弹窗footer左侧确定、右侧取消（关闭）

tab

关闭页签时候，是否需要提示（增强严谨性）

NavMenu 导航菜单

Carousel 走马灯

1. 考虑只有一个轮播页面时候的展示形式
2. 考虑轮播上的事件与轮播是否对应

Backtop 回到顶部

根据实际情况，考虑是否需要回到顶部或指定位置

Affix

根据实际情况，确定是否需要吸附效果，并且考虑兼容性问题

---

2.项目打包配置

• 打包后的项目，禁止在控制台输出调试信息，可以统一使用插件terser-webpack-plugin
• 代码打包压缩，可以统一使用插件 compression-webpack-plugin
  后台需要开启gzip

---

3.常见问题

3.1 页面缓存问题

根据实际项目需要，确定是否需要缓存页面数据。对于多页签页面，一般需要缓存每个页面的数据。

3.2 vue项目缓存问题

1.index.html中禁止缓存

2.引入的静态js后加时间戳

3.提示用户，版本更新，自己退出重新登录（没有办法的办法）,进行刷新。获取最新项目

this.$router.replace({path: `/login?v=${new Date().getTime()}`})
location.replace(location.href)

4.nginx中进行配置

expires -1s;
add_header Cache-Control no-cache;
add_header Cache-Control private;

3.3 其他问题

• 浏览器兼容问题，对应支持es语法的浏览器，需要特别关注IE11样式、功能是否有异常

---

4.其他

4.1插件推荐

• 导出excel
• Lodop打印插件如何在vue项目中使用lodop打印插件
• 百度Echarts Echarts
• 富文本编辑器 vue-quill-editor wangEditor

4.2源码学习

• vue源码学习
• axios源码学习