Vue 3 学习手册

你已经知道如何用 C# 编写业务逻辑、用 ASP.NET Core 提供 API。接下来要学习的是：在浏览器里管理状态、响应操作，并把数据呈现为可交互的页面。

这份手册从前端零基础开始，使用 Vue 3 + TypeScript + Composition API + <script setup>。示例围绕“任务管理”展开，你会逐步做出能新增、筛选、完成和删除任务的页面，最后接入自己的 .NET 服务。

第一站

先读 开发环境，运行 第一个 Vue 组件，再回到前端基础。已有项目可直接查看 任务管理实战。

学习路线

阶段	学什么	完成后的能力
1. 开始学习	Node.js、npm、Vite、单文件组件	独立创建和运行 Vue 项目
2. 前端基础	HTML/CSS、JavaScript、异步、TypeScript	看懂模板、函数和接口类型
3. Vue 3 核心	模板、响应式、组件、生命周期、组合式函数	独立写一个有状态的交互页面
4. 工程实践	Router、Pinia、HTTP、测试与调试	组织多页面应用并处理请求失败
5. 与 .NET 协作	DTO、错误格式、代理、CORS、认证	与 ASP.NET Core API 完成联调
6. 贯穿实战	完整任务管理项目	把知识组合成可运行的应用
7. 附录	速查、排错、学习计划、部署	遇到问题时快速找到对应方法

每天约 45～60 分钟，可以按 四周学习计划 前进。以“能独立改出一个功能”为检查标准，阅读进度只是辅助。

从 .NET 经验建立新概念

你熟悉的概念	前端里的对应工具	类比的边界
.NET SDK / CLI	Node.js / npm	Node.js 是 JS 运行时，npm 是包管理与脚本入口
NuGet / .csproj	npm / package.json	前端依赖会参与构建，部分代码会进入浏览器
C# 接口与泛型	TypeScript 接口与泛型	TS 类型在运行时会被擦除，不能验证服务器返回值
Razor / Blazor 组件	Vue 单文件组件	Vue 模板由前端构建工具编译，在浏览器更新
Task<T> / await	Promise<T> / await	JS 的异步通常依赖事件循环，不等于新建线程
LINQ Where / Select	数组 filter / map	JS 数组操作通常立即执行，没有 IQueryable
依赖注入服务	组合式函数 / Pinia store	生命周期和共享范围由调用与应用实例决定

类比不能代替机制

不要把 Vue 的 ref 理解成 C# 的 ref 参数，也不要把 TypeScript 的 interface 理解成运行时类型。每章都会说明这些容易误解的地方。

同一个任务，两种语言

先熟悉数据形状。这里的 C# 和 TypeScript 都描述任务，但只有 C# 类型会作为 CLR 类型存在。

TypeScript

任务模型

interface TaskItem {
  id: number;
  title: string;
  isDone: boolean;
}

const task: TaskItem = {
  id: 1,
  title: '学习 Vue 3',
  isDone: false,
};

C# 对照

任务 DTO

public record TaskItem(int Id, string Title, bool IsDone);

var task = new TaskItem(1, "学习 Vue 3", false);

ASP.NET Core 的 Web 默认 JSON 配置会把 IsDone 输出为 isDone，前端必须按实际 JSON 字段名读取。API 契约会进一步处理日期、枚举、分页与错误响应。

每章怎么学习

先读概念和 C# 对照，再亲手运行代码，最后完成练习。展开答案前，至少尝试一次。每章末尾有官方参考链接，方便核对机制和继续深入。

除明确标注“片段”的示例外，Vue 页面示例可以替换学习项目的 src/App.vue。工程章节会给出具体文件路径和安装命令。完整实战源码放在仓库的 examples/task-board/，与文档站相互独立。

本手册的范围

优先掌握 Vue 核心能力和前后端协作，再选择 Element Plus、Nuxt 或其他生态。实战后端使用内存存储，重启后数据会重置；数据库、生产身份认证和复杂权限属于后续扩展。

排版参考 Furion 在线文档的编号分组和阅读层次，内容为面向 .NET 开发者重新编写的学习材料。技术细节以 Vue 官方文档及对应工具的官方说明为准。