命名规范

良好的命名是代码可读性的基础，命名应该清晰、有意义、便于理解

文件命名

使用有意义的英文单词或短语，采用小写字母和连字符分隔，如 "home-page.vue"。

类型	规范	示例
Vue 组件文件	PascalCase 或 kebab-case	UserProfile.vue 或 user-profile.vue
JS/TS 工具文件	kebab-case	date-format.ts、request.ts
样式文件	kebab-case	global-styles.scss、reset.css
图片资源	kebab-case	logo-dark.png、bg-header.jpg
文件夹	kebab-case	user-center、order-list

✅ 推荐：user-profile.vue、date-format.ts、home-page.scss
❌ 不推荐：UserProfile.VUE、dateFormat.TS、HomePage.SCSS

变量和函数命名

主要采用驼峰式命名法，如 "userInfo"、"getUserName()"，具体可参考javascript 的命名规则

类型	规范	示例
普通变量	camelCase	userName、isLoading、pageSize
布尔变量	is/has/can 开头	isVisible、hasPermission、canEdit
数组变量	复数或 List/Arr 结尾	userList、menuItems、pages
函数/方法	camelCase，动词开头	getUserInfo()、handleClick()、formatDate()
事件处理	handle/on 开头	handleSubmit()、onPageChange()

// 推荐
const userInfo = {};
const isLoading = false;
const menuList = [];
const getUserById = (id) => {};
const handleFormSubmit = () => {};

// 不推荐
const data = {}; // 语义不明确
const flag = false; // 语义不明确
const arr = []; // 语义不明确
const func1 = () => {}; // 无意义的命名

组件命名

类型	规范	示例
组件名	PascalCase，多词组合	UserProfile、SearchInput
基础组件	Base/App/V 前缀	BaseButton、AppHeader
单例组件	The 前缀	TheHeader、TheSidebar
紧耦合子组件	父组件名前缀	TodoList、TodoListItem

CSS 类名

1. 使用 BEM（Block Element Modifier）命名模式来定义类名，提高可读性和维护性。 具体参考BEM
2. 使用 OOCSS(Object Oriented CSS) 规范可以提高样式可复用性，降低代码冗余。 具体参考OOCSS
3. 统一代码风格，具体查看css 篇章。

/* BEM 命名示例 */
.user-card {
} /* Block */
.user-card__avatar {
} /* Element */
.user-card__name {
} /* Element */
.user-card--active {
} /* Modifier */
.user-card__name--bold {
} /* Element + Modifier */

常量命名

全大写字母，用下划线分隔，如 "MAX_LENGTH"。

// 推荐
const MAX_LENGTH = 100;
const API_BASE_URL = "/api/v1";
const DEFAULT_PAGE_SIZE = 10;
const HTTP_STATUS_OK = 200;

// 不推荐
const maxLength = 100; // 应使用全大写
const APIBASEURL = "/api/v1"; // 应使用下划线分隔

枚举命名

// 枚举名使用 PascalCase，值使用全大写下划线分隔
enum StatusCode {
  SUCCESS = "SUCCESS",
  FAIL = "FAIL",
  PENDING = "PENDING",
}

// 或使用对象常量
const ORDER_STATUS = {
  PENDING: 0,
  PAID: 1,
  SHIPPED: 2,
  COMPLETED: 3,
} as const;

接口/类型命名

// 接口使用 PascalCase，建议不加 I 前缀
interface UserInfo {
  id: number;
  name: string;
  age: number;
}

// 类型别名使用 PascalCase
type UserId = number | string;

// Props 类型以 Props 结尾
interface UserCardProps {
  name: string;
  avatar?: string;
}