# 项目规范文档

本文档旨在概述 `vue-element-plus-admin-mini` 项目的技术栈、结构、规范和可用命令，为新加入的开发者提供指引。

## 1. 项目概述

这是一个基于 Vue 3、Vite 4、Element Plus 和 TypeScript 的后台管理系统集成方案。它提供了一套完整的、可复用的后台开发模板。

- **项目名称**: `vue-element-plus-admin`
- **版本**: `2.5.6`
- **作者**: Archer
- **仓库**: [GitHub](https://github.com/kailong321200875/vue-element-plus-admin)

## 2. 技术栈

项目采用了一系列现代前端技术，核心技术栈如下：

- **核心框架**: Vue 3
- **构建工具**: Vite 4
- **UI 库**: Element Plus
- **编程语言**: TypeScript
- **状态管理**: Pinia
- **路由**: Vue Router
- **HTTP 请求**: Axios
- **CSS 预处理器**: Less
- **原子化 CSS**: UnoCSS

## 3. 项目结构

以下是项目的主要目录结构及其功能说明：

```
.
├── public/              # 静态资源，不会被 Vite 处理
├── src/
│   ├── api/             # API 请求模块
│   ├── assets/          # 静态资源 (图片、SVG)
│   ├── components/      # 全局公共组件
│   ├── hooks/           # 自定义 Hooks
│   ├── layout/          # 布局组件
│   ├── locales/         # 国际化语言文件
│   ├── plugins/         # Vite 插件配置
│   ├── router/          # 路由配置
│   ├── store/           # Pinia 状态管理
│   ├── styles/          # 全局样式
│   ├── utils/           # 工具函数
│   ├── views/           # 页面视图
│   ├── App.vue          # 根组件
│   └── main.ts          # 应用入口文件
├── .env.*               # 不同环境的配置文件
├── .eslintrc.js         # ESLint 配置文件
├── prettier.config.js   # Prettier 配置文件
├── stylelint.config.js  # Stylelint 配置文件
├── vite.config.ts       # Vite 配置文件
└── package.json         # 项目依赖和脚本
```

## 4. 编码规范

项目强制实施一套编码和风格规范，以确保代码的一致性和可读性。

### JavaScript/TypeScript (ESLint)

- **基础配置**: `plugin:vue/vue3-essential`, `plugin:@typescript-eslint/recommended`
- **风格集成**: 与 `Prettier` 集成以处理格式问题。
- **自定义规则**:
  - 允许使用 `any` 类型 (`@typescript-eslint/no-explicit-any: 'off'`)。
  - 允许未使用的变量 (`@typescript-eslint/no-unused-vars: 'off'`)。
  - 允许多词组件名称关闭 (`vue/multi-word-component-names: 'off'`)。
  - 允许使用 `console` (`no-console: 'off'`)。
- **目的**: 保持相对宽松的检查，主要关注潜在的逻辑错误而非严格的风格限制。

### 代码格式化 (Prettier)

- **单引号**: `true`
- **分号**: `false`
- **Tab 宽度**: `2`
- **行宽**: `100`
- **尾随逗号**: `none`

### 样式 (Stylelint)

- **配置**: 使用 `stylelint-config-standard` 和 `stylelint-order`。
- **目的**: 保证 CSS/Less 代码的顺序和规范性。

### Git 提交 (Husky & Commitlint)

- **提交信息**: 遵循 `conventional-changelog` 规范。
- **预提交钩子**: 在提交前会自动运行 `lint-staged`，对暂存区的文件执行 ESLint 和 Prettier 检查。

## 5. 可用命令

通过 `pnpm` 运行以下脚本来管理项目：

- **`pnpm i`**: 安装所有项目依赖。
- **`pnpm dev`**: 启动开发服务器，并开启热更新。
- **`pnpm ts:check`**: 对整个项目进行 TypeScript 类型检查。
- **`pnpm build:pro`**: 构建用于生产环境的最终代码。
- **`pnpm serve:pro`**: 在本地预览生产环境的构建成果。
- **`pnpm lint:eslint`**: 运行 ESLint 检查 `.js`, `.ts`, `.vue` 文件并尝试自动修复。
- **`pnpm lint:format`**: 使用 Prettier 格式化所有支持的文件类型。
- **`pnpm lint:style`**: 运行 Stylelint 检查样式文件并尝试自动修复。