附录 E 学习资源推荐
4 分钟阅读
附录 E 学习资源推荐
学无止境。Vue 3 的世界很大,这本书只是入门。本章整理了 Vue 官方文档、优质书籍、开源项目、社区博客、视频课程等学习资源,助你在 Vue 之路上走得更远。
E.1 官方文档与教程
Vue 3 官方文档(必读) https://cn.vuejs.org/ Vue 官方文档是最权威的学习资料,内容全面、更新及时。所有 Vue 开发者都应该把官方文档通读一遍,至少把核心章节读懂。
Vue Router 4 文档 https://router.vuejs.org/zh/ Vue 官方路由管理器的文档。
Pinia 文档 https://pinia.vuejs.org/zh/ Vue 官方状态管理库的文档,API 简洁,文档质量很高。
VueUse 文档 https://vueuse.org/ VueUse 是 Vue 3 组合式函数的工具库,文档就是最好的教程。
Vite 文档 https://cn.vitejs.dev/ 下一代前端构建工具的官方文档。
Vue 3 官方 Playground https://play.vuejs.org/ 在线编写和分享 Vue 代码的编辑器,无需安装任何东西。
E.2 优质书籍
| 书名 | 特点 | 推荐度 |
|---|---|---|
| 《Vue.js 设计与实现》 | 深入 Vue 3 源码,讲解设计思路和实现原理 | ⭐⭐⭐⭐⭐ |
| 《Vue.js 3 实战》 | 覆盖 Vue 3 + TypeScript + Vite + Pinia 实战 | ⭐⭐⭐⭐ |
| 《深入浅出 Vue.js》 | Vue.js 2/3 核心源码解析,适合进阶 | ⭐⭐⭐⭐ |
| 《Learning Vue.js 3》 | 英文书籍,讲解系统全面 | ⭐⭐⭐ |
| 《The Vue.js 3 Workshop》 | 英文实战类书籍,偏重项目练习 | ⭐⭐⭐ |
特别推荐:如果你想深入理解 Vue 的底层原理,《Vue.js 设计与实现》(作者:梁灏)是必读之选。这本书从源码角度剖析 Vue 的响应式、虚拟 DOM、组件化和编译优化,是 Vue 进阶的圣经。
E.3 开源项目推荐
学习开源项目是提升 Vue 技能的最佳途径。以下是一些优质的 Vue 3 开源项目:
| 项目名 | GitHub 地址 | 特点 |
|---|---|---|
| vitesse | github.com/antfu/vitesse | Vite + Vue 3 + TypeScript + UnoCSS 最佳实践 |
| vue3-element-admin | github.com/element-plus/ vue3-element-admin | 基于 Element Plus 的后台管理系统 |
| naive-ui-admin | github.com/tuator/ naive-ui-admin | 基于 Naive UI 的后台管理系统 |
| ** vue3-music** | github.com/SevenOutman/ vue3-music | Vue 3 音乐播放器 |
| vue3-blog | github.com/helei0/ vue3-blog | Vue 3 博客系统 |
| ant-design-vue | github.com/vueComponent/ ant-design-vue | Ant Design 的 Vue 3 版本 |
| element-plus | github.com/element-plus/ element-plus | Element UI 的 Vue 3 版本 |
| headlessui-vue | github.com/tailwindlabs/ headlessui-vue | Tailwind 出品的无头组件库 |
| VueUse | github.com/vueuse/vueuse | Vue 3 组合式函数工具库源码 |
如何阅读开源项目:
- 先看 README,了解项目功能
- Clone 到本地,运行起来
- 从入口文件开始,顺着路由和组件嵌套关系走读
- 重点关注:项目结构设计、状态管理方式、API 封装思路、代码风格
E.4 技术社区与博客
中文社区
| 名称 | 地址 | 说明 |
|---|---|---|
| Vue 中文社区 | https://forum.vuejs.org/c/chinese/ | Vue 官方中文论坛 |
| 稀土掘金 | https://juejin.cn/ | 大量 Vue 优质文章 |
| 思否 | https://segmentfault.com/t/vuejs | 问答社区 |
| 知乎 Vue 话题 | https://www.zhihu.com/topic/ vuejs/hot | Vue 相关讨论 |
英文社区
| 名称 | 地址 | 说明 |
|---|---|---|
| Vue.js Discussions | github.com/vuejs/core/discussions | Vue 核心团队官方讨论区 |
| Vue.js Land | discord.gg/vue | Vue 官方 Discord 服务器 |
| Twitter #vuejs | twitter.com/search?q=%23vuejs | Vue 社区动态 |
优质博客(个人)
| 作者 | 博客地址 | 特点 |
|---|---|---|
| 尤雨溪(Evan You) | blog.evanyou.me/ | Vue 创始人,技术深度与广度兼具 |
| 霍春阳 | http://hcysun.me/ | 《Vue.js 设计与实现》作者,源码解析深入 |
| usthe | https://blog.usthem.com/ | Vue/TypeScript 实践 |
E.5 视频课程推荐
| 课程名 | 平台 | 讲师 | 特点 |
|---|---|---|---|
| Vue 3 + TypeScript 实战 | 慕课网 | 双越 | 系统全面,适合入门到进阶 |
| Vue3 完全指南 | Bilibili | 王红元 | 免费高清,深入原理 |
| Vue3 + Vite + Pinia 实战 | Bilibili | 技术胖 | 免费,偏重实战 |
| Vue 3 + Nuxt 3 SSR 实战 | Udemy | Maximilian | 英文课程,SSR 专题 |
| Advanced Vue 3 | Vue Mastery | Evan You 等 | 官方合作,质量最高 |
Bilibili 免费优质资源:
- 搜索"Vue 3 教程",播放量最高的几百集视频质量都不错
- 搜"Vue 3 源码解析",有一些优质的原理讲解视频
- 搜"Vite 教程",深入理解构建工具
E.6 其他工具推荐
| 工具名 | 地址 | 用途 |
|---|---|---|
| Can I Use | https://caniuse.com/ | 查看浏览器 API 兼容性 |
| Vue DevTools | Chrome 扩展商店 | Vue 调试工具 |
| Vite Playground | https://vite.new/vue | 在线创建 Vite 项目 |
| TypeScript Playground | https://www.typescriptlang.org/play | 在线编写 TypeScript |
| Regex101 | https://regex101.com/ | 正则表达式测试 |
| JSON Crack | https://jsoncrack.com/ | JSON 可视化 |
| Carbon | https://carbon.now.sh/ | 生成漂亮的代码截图 |
| tldraw | https://tldraw.com/ | 在线画流程图/架构图 |
附录小结
本章整理了 Vue 3 学习过程中的必备资源:
- 官方文档:永远是最好的第一手资料
- 优质书籍:进阶必读《Vue.js 设计与实现》
- 开源项目:vitesse、vue3-element-admin 等
- 社区博客:稀土掘金、知乎、Discord
- 视频课程:Bilibili 免费资源 + 慕课网系统课程
学习是一个持续的过程。希望这些资源能陪伴你走完 Vue 的学习之路,甚至走得更远。加油!
全书总结
恭喜你读完了这本 Vue 3 完全指南!从环境安装到响应式原理,从组件化开发到 Pinia 状态管理,从 TypeScript 到性能优化,从工程化到源码导读——我们几乎覆盖了 Vue 3 开发的所有重要知识点。
记住这些核心原则:
- 响应式是灵魂——理解 Proxy 和依赖收集,你就理解了 Vue 的一半
- 组件化是核心——把 UI 拆成组件,把逻辑抽成 Composables
- TypeScript 是标配——Vue 3 对 TS 的支持已经非常完善
- 工程化是保障——ESLint、Prettier、Git、CI/CD 是高质量团队的标配
- 实践出真知——看十遍不如动手做一遍
Vue 3 是一个还在快速发展的框架。Nuxt 3、Vapor Mode、新的编译器优化……未来还会有更多新东西等待你去探索。保持好奇,持续学习,你一定能成为优秀的 Vue 开发者!
祝你在 Vue 的世界里玩得开心! 🚀