作者介绍
大家好，我是飞飞。《飞飞程序员》 作者。先后供职于各大互联网公司，主导过日均千万级别网站的开发和运营，负责带领技术团队完成多个项目开发与维护。爱好分享知识，热爱技术，不只是写 Java，还会写PHP，对Liunx服务器，阿里云云服务（工作主要面向阿里云）也很熟悉，业余爱玩前端、Python、Nodejs等，对平面设计也有少许涉猎，Photoshop，影视制作等也能瞎玩玩。是一个一直混迹在互联网 还在不断挣扎的程序员。
Vue 3 入门教程：把常用功能一次性讲透
一、系列简介
这不是 Vue3 文档翻译，而是把你做项目时真正会用到的功能挑出来讲清楚。从响应式到组件通信，从路由到状态管理，再到打包部署，一条线走完，学完就能上手写项目。
二、你是否曾经历过这样的场景？
- 官方文档翻了一遍，
ref、reactive、computed、watch都看了，合上文档还是不知道从哪下手写一个页面。 - 跟着视频敲完一个 TodoList，轮到自己做项目，组件怎么拆、数据怎么传、路由怎么配，全卡住。
- 面试被问“Vue 3 响应式原理”，只能背出
Proxy，再往下问effect、依赖收集就说不清了。 - 简历上写着“熟悉 Vue 3”，项目栏却只有一个后台管理系统模板，还是跟着教程抄的。
- 本地跑得好好的，
npm run build之后部署到服务器，白屏、404、接口跨域，一个个报错不知道从哪查。
三、这个系列可以解决什么？
- 打通 Vue 3 核心 API 到项目实战的链路，不再停留在“看得懂、写不出”。
- 补齐组件拆分、通信、路由守卫、状态管理这些写项目绕不开的短板。
- 把响应式原理讲到能自己手写一个简易版，面试不再虚。
- 覆盖打包、环境变量、部署、常见线上问题排查，让你的项目真正能跑在服务器上，而不是只活在本地。
- 最终产出一个结构清晰、能写进简历、能拿去面试讲的项目。
四、你会学到什么？
前端基础
- Vue 3 模板语法、指令、事件绑定
ref/reactive/computed/watch的正确使用场景- 生命周期钩子，组合式 API 写法
组件与通信
- 组件拆分思路，
props/emit/v-model/ 插槽 provide/inject、defineExpose跨层级通信- 动态组件、异步组件
工程化
- Vite 项目搭建与配置
- Vue Router 4 路由配置、动态路由、路由守卫
- Pinia 状态管理，模块化组织 store
- Axios 封装、请求拦截、统一错误处理
原理与进阶
- 响应式原理：
Proxy、依赖收集、触发更新 - 虚拟 DOM 与 diff 简单理解
- 自定义指令、组合式函数（Composables）抽取
部署与上线
- 环境变量区分开发/生产
- 打包优化、路由懒加载
- Nginx 部署、history 模式 404 处理、跨域配置
- 常见线上白屏问题排查思路
五、适宜人群
- 在校生、应届生：想有一个拿得出手的 Vue 项目写进简历。
- 初中级前端：会用 Vue 2 或写过一点 Vue 3，但项目经验零散，想系统梳理。
- 全栈学习者：后端为主，需要一套能快速落地的前端方案。
- 个人创作者：想自己写点小工具、小网站，不想被框架细节卡住。
不适合：完全没碰过 HTML / CSS / JavaScript 的纯零基础。
六、学习须知
- 基础要求：HTML、CSS、JavaScript 基础要过关，至少写过原生 JS 的 DOM 操作，知道
let/const、箭头函数、解构、模块化import/export。 - 设备要求：能跑 Node.js 18+ 的电脑即可，内存 8G 起步，Windows / Mac / Linux 都行。
- 学习方法：每节课的代码一定要自己敲一遍，不要复制粘贴。敲完再试着改一改参数，看看效果变化。
- 心理预期：Vue 3 上手不难，但“会用”和“用得好”之间差的是项目量。这个系列帮你少走弯路，但代码量省不了。
- 练习注意：遇到报错先看控制台，再看网络请求，最后再搜。不要一报错就换教程，问题往往不在教程上。
七、加入项目学习
这个系列的代码和项目我会同步更新在仓库里，跟着敲的过程中卡住了，或者想拿完整项目源码对照，可以加入会员一起学。
