须知: 以下均为实际开发中用到的物料与规范,在此留存,会持续完善内容,同时欢迎各位补充!

一.开发与命名规范

• 约定

  • 文件必须添加头部解释说明,用以概括当前文件的主要作用
  • 相同内容的 UI 或者内容被使用 2 次以上,务必封装成组件
  • 临时数据如果过长,必须新建一个 js 用来放置临时数据,如当前页的 data.js
  • 提交代码前务必执行 eslint 校验并自行删除 console 输出,保持代码的整洁度
  • 项目采用懒加载形式,请自行补充 element,eachrt 等依赖的导出值
  • 项目布局尽可能以 flex 布局为主要写法,少用或尽量不用 absolute 等定位方式

• 控件显示隐藏 以 show 开头 如:showOpenDialog

• 条件判断 以 is 开头 如:是否是管理员 isAdmin | 是否开启 isOpen

• 事件 以 handle 开头, 如 @change @input 等事件, @click 除外

• 表单 以 form 结尾, 如 tagForm

• 数组 以 list 开头, 如 listTag

• 对象集合 以 obj 开头,如 objTag

• v-for 循环, 禁止命名为 item 和 index, 应命名为当前循环内容的简称,如: tagItem,tagIndex

• 单独字段,尽可能以 curr 开头, 如:当前搜索 currSearch | 当前活动条目 currActive

• 方法函数内的临时变量,尽量以 temp 开头,如:tempName | tempListValue

• 组件引用时,用绝对路径,如:@/components/xxx.vue ,方便其它页面引入

• 路由 Router

  • 命名 禁止使用大写,统一使用小写,如遇多层含义,以下划线分隔,如: applist | app_list
  • 标题头 必须添加标题头 title
  • 页面引入 必须使用懒加载形式 component()=>import('xxx.vue')

• Echart 图表使用时,必须先写成组件然后再引入到具体的页面中,便于多次利用及代码整洁

二.VsCode 插件扩展

• Auto Close Tag 自动添加结束标签
• Auto Rename Tag 自动重命名标签
• Chinese VsCode 中文
• Easy Sass sass 扩展
• Eslint 代码规范
• KoroFileHeader 头部生成注释说明
• Prettier 代码美化
• Vetur vue 语法支持
• EditorConfig for VsCode 统一编辑器配置

三.家族式设计语言概念(未落地)

概念:

• 品牌定位是基础与核心,可以帮助公司更好的了解市场与了解自己,加深用户对品牌的认知与认同感
• 具体品牌按类型区分,强调专业性的产品要相对保守,纯互联网产品(单品)则突出产品特色

举例:

• 腾讯的 Q 语言，设定了三个基本目标：统一体验，基因体现，社交向善

优点:

• UI 视觉一致性
• 设计原则唯一性
• 提高效率
• 多平台统一
• 软件连续性

实行:

• 基于 element 或 antd 组件进行二次封装,如 Button ,表单,字体等统一格调,减少重复性设计