项目规范文档

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

1. 项目概述

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

项目名称: vue-element-plus-admin
版本: 2.5.6
作者: Archer
仓库: GitHub

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 检查样式文件并尝试自动修复。

PROJECT_SPEC.md 3.9 KB Historique Raw