# 驾考宝典

**Repository Path**: keepyang/tra-exam

## Basic Information

- **Project Name**: 驾考宝典
- **Description**: 🚗✨ 驾考宝典
🎯 轻松过考，驾照在手，说走就走！
一个基于 Vue 3 + TypeScript + Vite 开发的超酷驾考学习应用，专为想快速通过科目一和科目四的你打造！
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-10-15
- **Last Updated**: 2026-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, vite

## README


<div align="center">

# 🚗✨ 驾考宝典

### 🎯 轻松过考，驾照在手，说走就走！

一个基于 **Vue 3 + TypeScript + Vite** 开发的超酷驾考学习应用，专为想快速通过科目一和科目四的你打造！

![Version](https://img.shields.io/badge/version-2.0.0-blue?style=flat-square)
![Vue 3](https://img.shields.io/badge/Vue-3.0-green?style=flat-square&logo=vuedotjs)
![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square&logo=typescript)
![Vite](https://img.shields.io/badge/Vite-4.0-purple?style=flat-square&logo=vite)

</div>

---

## 🎉 项目亮点

<div align="center">

| 功能 | 描述 | 状态 |
|------|------|------|
| 📚 **超全题库** | 科目一 + 科目四 各500道精选题目，涵盖所有考点 | ✅ 已上线 |
| 📱 **移动端优先** | 专为手机端优化的超美响应式设计，适配所有屏幕 | ✅ 已上线 |
| ⏱️ **真实模拟考试** | 完全按照真实考试规则：科目一100题/45分钟，科目四50题/30分钟 | ✅ 已上线 |
| 📝 **智能错题本** | 自动记录错题，支持错题重做，错题清空，一键搞定 | ✅ 已上线 |
| 🎯 **题目导航** | 支持通过题号快速跳转，已答题目高亮显示 | ✅ 已上线 |
| 🔍 **强大搜索** | 支持按题目编号或关键词搜索，快速定位题目 | ✅ 已上线 |
| 📊 **考试记录** | 记录每一次考试的成绩，见证你的成长和进步 | ✅ 已上线 |
| 🎨 **SASS样式** | 使用 SASS/SCSS 变量和混合器，代码更优雅 | ✅ 已上线 |

</div>

---

## 🛠️ 技术栈

<div align="center">

| 技术 | 版本 | 说明 | 学习要点 |
|------|------|------|----------|
| 🖥️ Vue 3 | latest | Composition API + Setup 语法糖 | 响应式、计算属性、生命周期 |
| 📘 TypeScript | latest | 类型安全，让代码更稳健 | 类型定义、接口声明 |
| ⚡ Vite | latest | 极速的开发体验和构建速度 | 配置、HMR、构建 |
| 🧭 Vue Router | 4.x | 单页应用路由管理 | 路由配置、导航守卫 |
| 🎨 SASS/SCSS | latest | 更强大的样式预处理器 | 变量、混合器、嵌套 |
| 💾 localStorage | - | 轻量级本地存储方案 | 数据持久化 |

</div>

---

## 📁 项目结构

```
驾考宝典/
├── public/
│   └── favicon.svg
├── src/
│   ├── api/
│   │   └── index.ts           📡 API 接口定义
│   ├── assets/
│   │   └── logo.svg           🎨 静态资源
│   ├── composables/
│   │   └── useStorage.ts      💾 本地存储工具
│   ├── data/
│   │   └── questions.ts       📚 题库数据
│   ├── pages/                 📱 页面组件
│   │   ├── HomePage.vue       🏠 首页
│   │   ├── PracticePage.vue   📖 顺序练习
│   │   ├── StudyPage.vue      📚 题库学习
│   │   ├── WrongAnswersPage.vue ❌ 错题本
│   │   ├── ExamSelectPage.vue 📝 考试说明
│   │   ├── ExamPage.vue       ⏱️ 模拟考试
│   │   └── ExamRecordsPage.vue 📊 考试记录
│   ├── router/
│   │   └── index.ts           🧭 路由配置
│   ├── styles/
│   │   └── variables.scss     🎨 SASS 变量和混合器
│   ├── types/
│   │   └── index.ts           📋 TypeScript 类型定义
│   ├── utils/
│   │   └── request.ts         🛠️ 请求工具
│   ├── App.vue                🎯 根组件
│   ├── main.ts                🚀 入口文件
│   └── style.scss             🎨 全局样式
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── .gitignore
└── README.md
```

---

## 🚀 快速开始

### ✨ 1. 克隆项目

```bash
git clone https://gitee.com/keepyang/tra-exam
```

### 📦 2. 安装依赖

```bash
npm install
```

### 🎉 3. 启动开发服务器

```bash
npm run dev
```

打开浏览器访问 `http://localhost:5173` 就可以看到炫酷的应用啦！

### 📦 4. 构建生产版本

```bash
npm run build
```

### 👀 5. 预览生产构建

```bash
npm run preview
```

---

## � 近期更新

### 🎨 UI/UX 优化
- ✅ 优化了考试结果页面的视觉效果，添加渐变色装饰
- ✅ 修复了错题本页面选择题和图标的对齐问题
- ✅ 为所有弹窗添加了蒙版效果，阻止底层页面滚动
- ✅ 首页科目卡片使用渐变色背景，更加美观
- ✅ 考试记录页面添加了详细错题查看功能
- ✅ 错题本页面添加了题目索引和垃圾桶清空按钮

### 📦 项目清理
- ✅ 删除了无关的脚本文件，保持项目精简
- ✅ 优化了项目结构

---

## �💡 使用指南

### 🏠 首页

超美的首页设计，包含所有功能入口，一键直达！
- 📖 顺序练习
- 📚 题库学习
- ❌ 错题回顾
- 📝 模拟考试
- 📊 考试记录

### 📖 顺序练习

循序渐进，逐个击破，查看答案和详细解析，轻松掌握每一个知识点！

### 📚 题库学习

- 按题目类型分类显示（选择题、判断题）
- 支持搜索和快速跳转，找到你想要的题目
- 实时显示题目完成状态，学习进度看得见！

### ⏱️ 模拟考试

完全按照真实考试规则：
- **科目一**：100 题，45 分钟，90 分及格
- **科目四**：50 题，30 分钟，90 分及格
- 交卷后立即显示成绩和详细解析
- 支持中途结束考试，灵活掌控时间

### ❌ 错题本

- 自动记录错题，不再重复犯同样的错误
- 显示用户错误答案和正确答案对比，一目了然
- 支持一键清空错题，重新开始！

### 📊 考试记录

查看历史考试成绩和详细信息，见证你的每一次进步！

---

## 📚 学习指南

### 🎯 Vue 3 Composition API

项目使用 Vue 3 的 Composition API，主要特点：

```typescript
// ✅ 使用 <script setup> 语法糖，代码更简洁
import { ref, computed, onMounted } from 'vue'

// ✅ ref 进行响应式数据管理
const count = ref(0)

// ✅ computed 计算属性，自动更新依赖
const double = computed(() => count.value * 2)

// ✅ 生命周期钩子
onMounted(() => {
  console.log('组件已挂载！')
})
```

### 🧭 Vue Router

```typescript
// 路由配置
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomePage },
    { path: '/practice/:subject', component: PracticePage }
  ],
  // 页面跳转时自动滚动到顶部
  scrollBehavior() {
    return { top: 0, left: 0 }
  }
})

// 编程式导航
router.push('/practice/1')
router.back()
```

### 📘 TypeScript

```typescript
// 类型定义
interface Question {
  id: number
  subject: 1 | 4
  type: string
  question: string
  options: string[]
  answer: number
  explanation: string
}

// 类型安全
const questions: Question[] = []
```

### 🎨 SASS/SCSS

```scss
// 变量定义
$color-primary: #1989fa
$color-success: #07c160

// 混合器使用
@mixin flex-center {
  display: flex
  justify-content: center
  align-items: center
}

// 嵌套语法
.card {
  background: white
  padding: 20px
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1)
  }
}
```

---

## 💡 学习建议

1. **🚀 第一步**：先从 `main.ts` 和 `App.vue` 开始，了解项目入口
2. **🧭 第二步**：查看 `router/index.ts` 了解路由配置
3. **📋 第三步**：查看 `types/index.ts` 了解数据结构
4. **🏠 第四步**：从 `HomePage.vue` 开始了解页面结构
5. **📡 第五步**：查看 `api/index.ts` 和 `utils/request.ts` 了解数据获取方式
6. **🎯 第六步**：深入研究 `ExamPage.vue` 了解复杂功能的实现

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！
1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request

---

<div align="center">

### ⭐ 如果这个项目对你有帮助，请给我一个 Star！

### 🎉 祝大家考试顺利，早日拿证！

---

Made with ❤️ by [Your Name](https://gitee.com/keepyang/tra-exam) using Vue 3 + TypeScript + Vite

</div>