vault backup: 2026-04-25 22:15:39
This commit is contained in:
@@ -0,0 +1,203 @@
|
||||
---
|
||||
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` | - |
|
||||
|
||||
## 关联笔记
|
||||
|
||||
- [[登录安全流程]]
|
||||
- [[验收任务清单]]
|
||||
- [[题目-在线管理平台]]
|
||||
Reference in New Issue
Block a user