zhangrui.i
zhangrui.i
发布于 2024-03-08 / 8 阅读
0
0

前端开发代码规范

命名规范

  • 文件和文件夹命名: 统一用小写加连字符-命名,多个单词用连字符连接

views
├── home
│   └── index.vue

Vue 组件名称

  • 组件名称统一用 PascalCase 法命名,多个单词首字母大写

<template>
  <AppProvider>
    <RouterView class="bg-layout" />
  </AppProvider>
</template>
  • iconify 图标组件名称统一用 kebab-case 法命名,多个单词用中划线连接

<template>
  <icon-mdi-emoticon />
</template>

方便iconify插件直接展示图标

  • 构造函数、class 类、TS 类型命名:统一用 PascalCase 法命名,多个单词首字母大写

function Person() {}

class Person {}

type Person = {
  name: string;
};

interface Person {
  name: string;
}
  • 变量、普通函数命名:统一用 camelCase 法命名,多个单词首字母小写

let num: number = 1;

function getNum() {}
  • 常量命名:统用大写字母命名,多个单词用下划线连接

const MAX_COUNT = 10;
  • 样式的命名:一用小写字母命名,多个单词用中划线连接

.container {
}

.container-item {
}
  • 请求函数命名统一以fetch开头,后面跟请求的资源名称

function fetchUser() {}


评论