# vue-react-learning

**Repository Path**: iDai/vue-react-learning

## Basic Information

- **Project Name**: vue-react-learning
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-05
- **Last Updated**: 2026-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 与 React 19 学习包

零基础向的中文教程 + 两个可以直接运行的 TypeScript 项目。

两个项目实现的是**同一个功能**（待办清单 + 详情页 + 响应式实验室），文件一一对应。
你可以打开同名文件左右对照，一眼看出两个框架的差异 —— 这是学框架最快的方式。

## 目录结构

```
vue-react-learning/
├── README.md            ← 你正在读这个
├── docs/                ← 教程文档，按顺序读
│   ├── 00-环境准备.md
│   ├── 01-JS与TS必备.md
│   ├── 02-Vue3核心.md
│   ├── 03-React核心.md
│   ├── 04-Vue与React对照表.md
│   ├── 05-状态管理.md
│   ├── 06-路由与数据请求.md
│   ├── 07-工程化与部署.md
│   └── 08-练习与学习路线.md
├── vue-demo/            ← Vue 3 + Pinia + Vue Router
└── react-demo/          ← React 19 + Zustand + React Router
```

## 快速开始

先跑起来，再看文档。看着能动的东西学，比干读快得多。

```bash
# 跑 Vue 版
cd vue-demo
npm install
npm run dev        # 打开终端里显示的 http://localhost:5173

# 跑 React 版（新开一个终端窗口）
cd react-demo
npm install
npm run dev        # 端口会自动变成 5174，两个可以同时开
```

把两个浏览器窗口并排放，操作一遍：添加、勾选、过滤、点标题进详情页、返回。
两边行为完全一致 —— 因为需求一样，只是实现方式不同。

## 建议的学习顺序

| 阶段 | 做什么 | 大概耗时 |
|---|---|---|
| 1 | 读 `docs/00` `docs/01`，把两个项目跑起来 | 半天 |
| 2 | 读 `docs/02`，对着 `vue-demo/src` 逐个文件看 | 2～3 天 |
| 3 | 读 `docs/03`，对着 `react-demo/src` 逐个文件看 | 2～3 天 |
| 4 | 读 `docs/04` 对照表，回头再扫一遍两份代码 | 半天 |
| 5 | 读 `docs/05` `docs/06` `docs/07` | 2～3 天 |
| 6 | 做 `docs/08` 里的练习题 | 持续 |

**只学一个框架也完全可以**：先按 1 → 2 →（跳过 3、4）→ 5 → 6 走 Vue 线，
或者 1 → 3 → 5 → 6 走 React 线。之后再回头补另一个，会快非常多。

## 两个项目的文件对应关系

| Vue | React | 作用 |
|---|---|---|
| `src/main.ts` | `src/main.tsx` | 程序入口 |
| `src/App.vue` | `src/App.tsx` | 根组件（导航栏 + 页面出口） |
| `src/router/index.ts` | （合并在 `App.tsx` 里） | 路由配置 |
| `src/stores/todo.ts` | `src/store/todo.ts` | 全局状态 |
| `src/types.ts` | `src/types.ts` | 类型定义（**内容完全相同**） |
| `src/api/todos.ts` | `src/api/todos.ts` | 模拟接口（**几乎相同**） |
| `src/style.css` | `src/index.css` | 样式（**内容完全相同**） |
| `src/components/TodoInput.vue` | `src/components/TodoInput.tsx` | 输入框组件 |
| `src/components/TodoItem.vue` | `src/components/TodoItem.tsx` | 单条待办组件 |
| `src/views/TodoListView.vue` | `src/views/TodoListView.tsx` | 列表页 |
| `src/views/TodoDetailView.vue` | `src/views/TodoDetailView.tsx` | 详情页 |
| `src/views/PlaygroundView.vue` | `src/views/PlaygroundView.tsx` | 响应式 / Hooks 实验室 |

注意 `types.ts`、`api/todos.ts`、CSS 三个文件两边基本一样 ——
这说明**类型定义、网络请求、样式都是与框架无关的**。
框架只负责「数据怎么变成界面」这一件事，这个认知能帮你省下很多学习成本。

## 版本信息

这套代码在以下版本上验证通过（`npm run build` 通过，浏览器实测 32 项功能检查全部通过）：

- Node.js 20.19 / npm 10.8
- Vue 3.5、Vue Router 5.2、Pinia 4.0
- React 19.2、React Router 7.18、Zustand 5.0
- Vite 8.2、TypeScript 6.0

> 前端生态更新很快。如果你在很久之后使用这套代码，`npm install` 可能装到更新的大版本，
> 少数 API 会有出入。遇到报错时，**优先查官方文档**而不是搜到的旧博客：
> [cn.vuejs.org](https://cn.vuejs.org/) · [zh-hans.react.dev](https://zh-hans.react.dev/)