---
tags:
  - 前端
  - 依赖管理
  - Vite
  - React
  - TypeScript
create time: 2026-04-25 14:30
---

# 前端项目依赖清单

## 概述

整理在线学习管理后台项目所需的前端依赖包，按功能分类，并给出安装顺序与一句话理解。

## 正文

### 什么是"依赖"

依赖就是你项目需要用到的外部工具包。你不从零造轮子，而是使用社区成熟方案来加速开发。

> **思考：** 为什么我们不做"从零手写路由、手写请求库"，而是直接引入现成方案？
>
> 回答：课程项目的核心目标是学习知识，不是重复造轮子。依赖管理是真实开发中的基础能力。

### 核心依赖（必装）

#### 1. 框架层

| 包名 | 作用 | 一句话理解 |
|------|------|-----------|
| `react` | 页面组件开发核心框架 | 写页面、管理状态、组件化 |
| `react-dom` | 将 React 渲染到浏览器 DOM | 没有它页面显示不出来 |

#### 2. 构建工具

| 包名 | 作用 | 一句话理解 |
|------|------|-----------|
| `vite` | 开发服务器 + 热更新 + 生产打包 | 启动和打包项目的施工队 |

```bash
# 创建 Vite + React + TypeScript 项目
npm create vite@latest client -- --template react-ts
cd client
npm install
```

#### 3. 类型系统

| 包名 | 作用 | 一句话理解 |
|------|------|-----------|
| `typescript` | JavaScript 的加强版，提供类型检查 | 提前发现代码错误，减少低级 bug |

```ts
// TypeScript 类型示例：定义学生数据结构
type Student = {
  name: string
  age: number
  class: string
}

// 错误传参会被 TS 编译器直接拒绝
const s: Student = { name: '张三', age: 20, class: '软工2024' }
```

#### 4. UI 组件库

| 包名 | 作用 | 一句话理解 |
|------|------|-----------|
| `antd` | React 成熟组件库（按钮、表格、表单、弹窗等） | 现成的门窗家具，直接拿来用 |

```tsx
import { Button, Input, Table, Modal, Form, Pagination } from 'antd'
// 不需要自己写样式，一行代码就能用
<Button type="primary">新增</Button>
```

#### 5. 样式工具

| 包名 | 作用 | 一句话理解 |
|------|------|-----------|
| `tailwindcss` | 原子化 CSS，直接在 JSX 里写样式类名 | 快速搭页面布局的装修工具 |

```tsx
// 直接写类名控制样式，无需额外 CSS 文件
<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow">
  <h2 className="text-lg font-semibold">课程列表</h2>
  <Button type="primary">新增</Button>
</div>
```

### 建议安装（按需）

| 包名 | 作用 | 一句话理解 |
|------|------|-----------|
| `react-router-dom` | React 路由，多页面切换 | 各个房间之间的通道 |
| `axios` | HTTP 请求库 | 跟后端通信的电话线 |
| `zustand` | 轻量级状态管理 | 全局状态（登录用户、主题等） |

```tsx
// react-router-dom 示例：定义路由
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  { path: '/login', element: <LoginPage /> },
  { path: '/dashboard', element: <DashboardPage /> },
  { path: '/courses', element: <CoursePage /> },
])
```

```ts
// axios 示例：封装请求
import axios from 'axios'

const request = axios.create({
  baseURL: '/api',
  timeout: 10000,
})

// 统一处理 token 和错误
request.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})
```

### 安装顺序（适合初学者）

```bash
# 第一步：创建项目
npm create vite@latest client -- --template react-ts
cd client
npm install

# 第二步：安装 UI 组件库
npm install antd

# 第三步：安装路由和请求
npm install react-router-dom axios

# 第四步：安装 Tailwind CSS（需要额外配置）
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 第五步：安装开发类型声明（如果需要）
npm install -D @types/react @types/react-dom
```

### 项目依赖全景图

你可以把这些依赖理解为"盖房子"的过程：

```mermaid
graph LR
  subgraph "基础设施"
    V[Vite - 施工队]
  end
  subgraph "主体结构"
    R[React - 房子骨架]
    RDOM[React-DOM - 落地到浏览器]
  end
  subgraph "标准与规范"
    TS[TypeScript - 图纸标准]
  end
  subgraph "装修材料"
    ANT[Ant Design - 现成组件]
    TW[Tailwind CSS - 装修工具]
  end
  subgraph "配套工程"
    RR[React Router - 房间通道]
    AX[Axios - 通信线路]
  end

  V --> R
  R --> RDOM
  TS -.-> R
  TS -.-> RDOM
  ANT -.-> R
  TW -.-> R
  RR -.-> R
  AX -.-> R
```

### 依赖关系总结

| 类别 | 必装 | 建议 | 暂不装 |
|------|------|------|--------|
| 框架 | `react`, `react-dom` | - | - |
| 构建 | `vite` | - | - |
| 类型 | `typescript` | - | - |
| UI | `antd` | - | - |
| 样式 | `tailwindcss` | - | - |
| 路由 | - | `react-router-dom` | - |
| 请求 | - | `axios` | - |
| 状态管理 | - | `zustand` | - |

## 关联笔记

- [[登录安全流程]]
- [[验收任务清单]]
- [[题目-在线管理平台]]