Vue3 PC端页面开发规范( 二 ) _Vue3

说明：
子页面一定要将 filename 项设置为带有模块名称的路径名，否则会构建到根目录下
3.4注释1.必须进行注释的情况：

公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明，对于代码中特殊用途的变量、使用了某种算法或思路等需要进行注释描述

2.单行注释普通方法一般使用单行注释// 来说明该方法主要作用 3.多行注释组件使用说明，和调用说明
示例：

<!--公用组件：组件名称/*** 组件名称* @module 组件存放位置* @desc 组件描述 * @author 组件作者* @date 2017年12月05日17:22:43* @param 参数说明* @param 参数说明* @emit 触发事件* @return 返回值* @example 调用示例* */-->

3.5编码规范尽量按照ESLint格式要求编写代码

使用ES6风格编码源码
- 定义变量使用let
- 定义常量使用const

使用export,import 模块化

避免 this.$parent

无需将 this 赋值给 component 变量

调试信息console.log() 使用完及时删除

3.6命名规范本规范使用驼峰式命名(camelCase)和下划线命名法(UnderScoreCase)
普通变量
驼峰式命名

类变量
驼峰式命名
itemOf[数据表名]oldItemOf[数据表名]
类属性
下划线命名
与数据表字段名保持一致
查询类变量
驼峰式命名
queryFieldOf[数据表名]
查询类属性
驼峰式命名
query[字段名]
表格列表
驼峰式命名
tableDataOf[数据表名]
数据分页
驼峰式命名
totalOf[数据表名] currentPageOf[数据表名] pageSizeOf[数据表名]
对话框
驼峰式命名
titleOf[数据表名] dialogVisibleOf[数据表名]
选项
驼峰式命名
[业务关键字]Options
函数
下划线命名法

事件函数
下划线命名法
[UI组件名]_[UI组件类型]_[事件]ed 如：city_select_changed
函数参数
驼峰式命名

组件封装
驼峰式命名
须根据封装的类型进行合理命名对话框采用Dialog，弹出框采用Popover等；格式：[动作][业务][类型]，如：EditorContractDialog
路由path
下划线命名法
全部使用小写字母
路由name
驼峰式命名

数据表名：是数据表设计时命名的，在此处的数据表名不包含前缀。
3.7数据校验与删除1.数据校验一律不允许使用任何校验框架来实现，采用if语句硬编码方式来实现，不符合条件的数据弹出对话框进行提示；
2.数据删除一律弹出确认对话框要求用户确认后执行删除动作；
3.弹出提示信息或确认信息一律使用 sweetalert 组件进行操作，主要原因是其代码量比较小；
弹出提示信息示例：

// 带有确认按钮swal('错误', '请选择要编辑的数据!', 'error')// 停留1秒后自动消失swal({title: "提示!", text: "操作成功!", icon: "success", button: false, timer: 1000});swal({title: "提示!", text: "操作失败!", icon: "error", button: false, timer: 1000});

弹出确认信息示例：

swal({title: "确认",text: "确实要删除您选择的数据吗？",icon: "warning",buttons: ["取消", "确定"],dangerMode: true,}).then((willDelete) => {if (willDelete) {// ...}});

3.8日期数据在数据提交时，日期时间型数据必须转换为字符串，格式：
日期格式：YYYY-MM-DD
时间格式：HH24:MI:SS
时间戳格式：YYYY-MM-DD HH24:MI:SS
日期格式转换可以直接使用封装好的 utils.js 中的函数进行处理：
dateToString (date, format)stringToDate (sDate, format)3.9Rest请求产品的Rest请求只使用Post和Get，Get请求只适用于文件下载，其余一律使用Post请求。
前端在进行Rest请求时，一律调用封装号的 utils.js 中的postRequest函数进行请求。
postRequest (url, data)对于无输入参数的请求，一律将data设置为{tmp: null}进行请求
3.10表单数据（类属性）初始化