驼峰式命名法 #

• 大驼峰式命名法 首字母大写

const UserInfo = {}

• 小驼峰式命名法 首字母小写

const userInfo = {}

文件/文件夹命名规范 #

• 文件名不得含有空格
• 文件名只使用小写字母，不使用大写字母
• 名称较长时采用半角连接符(-)分隔：usr/dev/document/front-end/project-vue3
• 关于具体的业务模块文件、目录命名规则如下：
  • 如果该模块下的菜单需要加上弹窗或者是详情页，则需要给这个菜单加上一层目录 具体的菜单名命名 ，主页面用 index.vue 命名，示例如下：
  text

    菜单层级：系统管理/角色管理
    对应的文件层级：
        1、system-management/role-management/index.vue // 主页面
        2、system-management/role-management/detail.vue // 详情内页
        3、system-management/role-management/models/form.vue // 弹窗内容
  

  • 如果该模块下的菜单不需要加上弹窗或者是详情页，则具体的 vue 文件可以用该菜单名命名
  text

    菜单层级：首页/xx大屏
    对应的文件层级：
        1、home/xx-big-screen.vue
  

编码命名规范 #

• 变量命名
  • 命名方式: 采用小驼峰式命名方法
  • 命名规范:
    • 普通变量(number, string, date)
    • 布尔类型：需要一个标识变量含义的前缀，比如has, is, whether, can, should等
    • 数组/集合等复数形式：最好以s或list等能够标识复数形式的后缀结尾，标识当前变量是复数形式，提高可读性

let age = 10
let userInfo = {}
let isTrue = false
let users = []
let studentsList = []

• 函数命名
  • 命名方式: 小驼峰方式 ( 构造函数使用大驼峰命名法 )
  • 命名规则 : 前缀为动词，动词 eg：add / update / delete / detail / get

function getUserInfo() {
    return {}
}
function UserInfo() {}

• 接口类命名
  • 命名方式: 大驼峰方式

interface UserInfo {
    name: string
    age?: number
}
type UserName = string
class PersonInfo {
    avatar?: string
}

• CSS命名
  • 样式类名使用小写字母，以半角连接符(-)分割
  • id 采用驼峰式命名
  • scss / less 中的变量、函数、混合、placeholder采用驼峰式命名

<style>
    @MainColor: #f00f00;
    .user-info {}
    #UserInfo {}
</style>