前端框架工具（总览）

面向：已完成 Part07 前端基础语法（JavaScript / TypeScript / 模块 / npm / DOM / 开发者工具），想用 Vue 生态开发前端项目的学生。 目标：学完本 Part，你能掌握 Vue 3 的核心机制（渲染、模板语法、响应式、组件、路由、状态管理），会用 Element Plus、axios、dayjs、ECharts 等常用工具库，并理解 Vite 工程化与跨域联调，为 Part09 项目实战打基础。 组织方式：每章一个独立 Markdown 文件（共 20 章），按顺序学习即可。

1、本教程怎么用

1. 按章节顺序学习，每一章是一个独立的 Markdown 文档（Lecture）。
2. 每一章的代码都可以照着敲、可以运行，建议边学边敲（从第 1 章起用 Vite 工程，代码在浏览器里看效果）。
3. 各讲的操作步骤配有图解（位于 assets/ 目录），看不懂时先看图。
4. 建议先跑通第 1 章（认识 Vue 工程），把渲染、模板语法、响应式这三大基础搞明白，后面的组件、路由、状态管理都围绕同一个工程展开。

提示：Markdown 编辑器中图片使用相对路径 ./assets/xxx.svg，请保持 Lecture 文件和 assets 文件夹在同一目录下。

2、章节目录

3、学习路线

• 第 1 章：认识 Vue。装好 Vite 工程，看懂工程结构。
• 第 2 章：渲染。页面是怎么"画"出来的（虚拟 DOM、两种渲染方式）。
• 第 3 章：模板语法。插值、指令、条件与列表渲染。
• 第 4 章：响应式。数据一变页面自动更新（ref / reactive）。
• 第 5 章：v-model。表单输入双向绑定。
• 第 6 章：computed 与 watch。派生数据与监听变化。
• 第 7 章：生命周期。组件的出生与销毁。
• 第 8 章：组件。定义、插槽、props、事件——组件通信的四种方式。
• 第 9 章：路由。多页面跳转与传参。
• 第 10 章：状态管理。用 Pinia 全局共享数据。
• 第 11 章：组件库。Element Plus 开箱即用。
• 第 12 章：表单。必填、格式校验与提交。
• 第 13 章：样式。Flex 布局与 Scoped 样式隔离。
• 第 14 章：综合。串讲一个中型页面。
• 第 15 章：请求。axios 概念与 GET / POST。
• 第 16 章：请求进阶。拦截器、错误处理、参数。
• 第 17 章：日期。dayjs 格式化与计算。
• 第 18 章：图表。ECharts 数据可视化。
• 第 19 章：工程化。Vite 配置、环境变量、打包、开发代理。
• 第 20 章：联调。跨域与 CORS 专题。

4、环境要求

前置知识：Part07 前端基础语法（JavaScript / TypeScript / 模块 import-export / npm / DOM 与事件 / 浏览器开发者工具）。 本 Part 每节代码都在 Vite 工程里运行（第 1 章建立），不需要后端，接口请求类章节用模拟数据或公开接口演示。

5、各章速查