204 lines
5.0 KiB
Markdown
204 lines
5.0 KiB
Markdown
---
|
|
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` | - |
|
|
|
|
## 关联笔记
|
|
|
|
- [[登录安全流程]]
|
|
- [[验收任务清单]]
|
|
- [[题目-在线管理平台]]
|