Archived

This repository has been archived on 2026-05-19. You can view files and clone it. You cannot open issues or pull requests or push a commit.

Files

T

wonder 3d8642b7e6 vault backup: 2026-04-25 22:15:39

2026-04-25 22:15:39 +08:00

5.0 KiB

Raw Blame History

tags, create time

前端项目依赖清单

概述

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

正文

什么是"依赖"

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

思考： 为什么我们不做"从零手写路由、手写请求库"，而是直接引入现成方案？

回答：课程项目的核心目标是学习知识，不是重复造轮子。依赖管理是真实开发中的基础能力。

核心依赖（必装）

1. 框架层

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

2. 构建工具

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

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

3. 类型系统

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

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

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

4. UI 组件库

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

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

5. 样式工具

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

// 直接写类名控制样式，无需额外 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`	轻量级状态管理	全局状态（登录用户、主题等）

// 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 /> },
])

// 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
})

安装顺序（适合初学者）

# 第一步：创建项目
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

项目依赖全景图

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

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`	-

5.0 KiB Raw Blame History