Vue.js 学习资源
官方资源
文档
- Vue.js 官方文档 - 最权威的学习资源
- Vue Router 文档 - 官方路由管理器
- Pinia 文档 - 官方状态管理库
- Vite 文档 - 新一代构建工具
- Nuxt 文档 - Vue SSR 框架
- VueUse 文档 - 组合式 API 工具集
官方工具
- Vue DevTools - 浏览器开发工具
- Volar - VS Code 插件
- Vue Playground - 在线代码编辑器
视频教程
中文视频
- 尚硅谷 Vue3 教程 - B站免费教程
- 黑马程序员 Vue3 - 系统完整
- 技术胖 Vue3 教程 - 实战项目
- 慕课网 Vue 课程 - 付费精品课程
英文视频
- Vue Mastery - 官方推荐，高质量课程
- Vue School - 专业 Vue 培训
- Traversy Media - YouTube 免费教程
- The Net Ninja - Vue 系列教程
书籍
中文书籍
- 《Vue.js 设计与实现》 - 霍春阳（Vue 核心团队成员）
- 《深入浅出 Vue.js》 - 刘博文
- 《Vue.js 3.0 核心源码解析》 - 黄轶
- 《Vue.js 实战》 - 梁灏
英文书籍
- "Vue.js 3 By Example" - John Au-Yeung
- "Vue.js: Up and Running" - Callum Macrae
- "Testing Vue.js Applications" - Edd Yerburgh
- "Fullstack Vue" - Hassan Djirdeh
在线课程平台
中文平台
英文平台
- Udemy - 大量 Vue 课程
- Pluralsight - 专业技术培训
- Frontend Masters - 前端大师课程
- egghead.io - 简短精炼的课程
博客和文章
官方博客
- Vue.js 官方博客 - 最新动态和深度文章
- 尤雨溪的博客 - Vue 作者的思考
技术社区
- 掘金 Vue 专区 - 中文技术文章
- 思否 Vue 标签 - 问答和文章
- 知乎 Vue 话题 - 深度讨论
- CSDN Vue 专区 - 技术博客
个人博客
- Anthony Fu - Vue 核心团队成员
- 崔效瑞 - mini-vue 作者
- 神三元 - 前端博主
开源项目
学习项目
- vue3-element-admin - 后台管理系统
- vue-vben-admin - 企业级后台
- Soybean Admin - 清新优雅的后台
- vue-pure-admin - 精简版后台
组件库源码
- Element Plus - 学习组件设计
- Ant Design Vue - 企业级组件
- Naive UI - TypeScript 实现
工具库源码
- VueUse - 学习组合式函数
- Pinia - 学习状态管理
- Vue Router - 学习路由实现
社区和论坛
中文社区
- Vue.js 中文社区 - 官方论坛
- Vue.js 开发者 - 中文社区
- 掘金 - 技术分享平台
- 思否 - 问答社区
国际社区
- Vue.js Discord - 实时聊天
- Reddit r/vuejs - 讨论区
- Stack Overflow - 问答平台
- Dev.to Vue - 技术文章
GitHub 资源
Awesome 列表
- Awesome Vue - Vue 资源大全
- Awesome Vue 3 - Vue 3 专属资源
学习仓库
- vue3-examples - 官方示例
- mini-vue - 简化版 Vue 实现
- vue-design - Vue 源码分析
实战项目推荐
初级项目
- 待办事项应用 - 学习基础 CRUD
- 天气应用 - 学习 API 调用
- 计算器 - 学习事件处理
- 博客系统 - 学习路由和状态管理
中级项目
- 电商网站 - 完整的购物流程
- 社交媒体应用 - 用户交互和实时更新
- 项目管理工具 - 复杂的状态管理
- 在线聊天应用 - WebSocket 实时通信
高级项目
- 后台管理系统 - 权限管理、数据可视化
- 在线编辑器 - 复杂的交互逻辑
- 视频平台 - 媒体处理和播放
- 实时协作工具 - 多人协作功能
学习路线
第一阶段：基础入门（1-2周）
- ✅ HTML、CSS、JavaScript 基础
- ✅ Vue 基础语法
- ✅ 模板语法和指令
- ✅ 组件基础
- ✅ 完成简单项目（待办事项）
第二阶段：进阶学习（2-3周）
- ✅ 组件通信
- ✅ 生命周期
- ✅ 组合式 API
- ✅ Vue Router
- ✅ Pinia 状态管理
- ✅ 完成中型项目（博客系统）
第三阶段：深入实践（3-4周）
- ✅ 组件库使用
- ✅ 项目工程化
- ✅ 性能优化
- ✅ 测试
- ✅ 完成复杂项目（电商网站）
第四阶段：高级主题（持续学习）
- ✅ SSR 和 Nuxt.js
- ✅ 微前端
- ✅ 源码阅读
- ✅ 贡献开源
- ✅ 完成企业级项目
学习建议
1. 动手实践
- 不要只看教程，要动手写代码
- 每学一个知识点就做一个小项目
- 遇到问题先自己思考，再查资料
2. 阅读文档
- 官方文档是最好的学习资源
- 遇到问题先查文档
- 定期重读文档，会有新的理解
3. 参与社区
- 在社区提问和回答问题
- 分享自己的学习心得
- 参与开源项目
4. 持续学习
- 关注 Vue 官方动态
- 学习新特性和最佳实践
- 了解前端发展趋势
5. 构建项目
- 从简单项目开始
- 逐步增加复杂度
- 完成完整的项目周期
常见问题
Q: Vue 2 还是 Vue 3？
A: 新项目建议使用 Vue 3，它有更好的性能和 TypeScript 支持。
Q: 需要学习 TypeScript 吗？
A: 推荐学习，Vue 3 对 TypeScript 支持很好，大型项目必备。
Q: 要不要学习 Nuxt.js？
A: 如果需要 SSR 或静态站点生成，Nuxt.js 是最佳选择。
Q: 如何提高学习效率？
A: 多写代码，多做项目，多看源码，多参与社区。
Q: 学完 Vue 还要学什么？
A:
- 构建工具（Vite、Webpack）
- 测试（Vitest、Cypress）
- 性能优化
- 工程化实践
- 其他框架（React、Angular）
职业发展
初级前端工程师
- 掌握 Vue 基础
- 能独立完成简单页面
- 了解基本的工程化
中级前端工程师
- 熟练使用 Vue 全家桶
- 能设计组件架构
- 掌握性能优化
- 有完整项目经验
高级前端工程师
- 深入理解 Vue 原理
- 能解决复杂技术问题
- 有架构设计能力
- 能指导团队成员
前端架构师
- 精通前端技术栈
- 有大型项目经验
- 能制定技术方案
- 有技术影响力
总结
学习 Vue.js 是一个循序渐进的过程：
- 打好基础 - HTML、CSS、JavaScript
- 系统学习 - 跟随官方文档
- 动手实践 - 完成各种项目
- 深入理解 - 阅读源码和原理
- 持续进步 - 关注新技术和最佳实践
记住：最好的学习方式就是动手写代码！
祝你学习愉快，成为优秀的 Vue 开发者！🎉