怎么通过Vue3官方GitHub快速上手进阶？还有哪些容易被忽略的宝藏资源？

terry 1天前阅读数 268 #Vue

很多刚接触Vue3或者从Vue2过渡过来的开发者，都会下意识打开浏览器找教程，但其实最权威、更新最快的入门和进阶资料，全藏在Vue3的官方GitHub仓库里，不过很多人点进去一看，文件夹、issue、PR堆得密密麻麻，根本不知道从哪下手，今天就结合真实的踩坑经验，带大家梳理一遍Vue3官方GitHub的正确打开方式,顺便挖几个藏在角落里的实用工具和资料。

先摸透仓库的基本结构，找到入门的第一扇门

第一次进仓库的朋友，别直接盯着vue目录或者核心代码看，很容易劝退，先把仓库的README.md看完，虽然是全英文的，但用浏览器翻译插件大概翻一遍就能懂框架的核心定位——渐进式JavaScript框架，生态覆盖从单组件到大型SPA，再到SSR/SSG全链路。

重点看仓库的顶层文件夹，只有分清这些文件夹的作用,才能精准定位自己需要的内容：

vue目录：这是核心库的源码，新手暂时不用碰，但如果想搞懂Vue3的Composition API底层、虚拟DOM Diff算法、响应式原理这些进阶内容,这里就是宝库。
packages目录：拆分成了很多小的npm包，vue/runtime-core（负责核心运行时逻辑，不依赖浏览器）、@vue/runtime-dom（把核心逻辑适配到浏览器DOM）、@vue/reactivity（单独的响应式系统，可以在任何JavaScript环境用）、@vue/compiler-sfc（编译单文件组件的工具），这些单独的包对高级开发者做定制化开发很有用，比如写个跨平台的UI组件库，就可以只引入@vue/runtime-core,然后自己写适配层。
docs目录：别以为官方文档只在vuejs.org上，仓库里也有一份镜像版本！更重要的是，文档的所有源码也在这里，如果你觉得某段官方文档写得不够清楚，或者想提交翻译贡献，直接来这里找对应的Markdown文件就行，仓库里的文档更新比官网镜像快个一两天，遇到刚发布的小版本新功能，想第一时间看文档,来这里准没错。
test目录：全是核心库的测试用例，新手虽然不需要写，但可以通过看测试用例快速了解某个API的正确用法——比如你对watchEffect和watch的区别有点模糊，直接搜watchEffect.spec.ts文件，里面有各种场景的测试,比看文字教程直观多了。
playground目录：这个是重点！官方在仓库里内置了一个在线的Vue3代码编辑器，不用自己搭项目就能试代码，如果是在本地克隆了仓库，运行pnpm install && pnpm dev就能启动，编辑器里还预设了很多Composition API、Teleport、Suspense等Vue3新特性的示例,改完代码就能实时看到效果。

新手入门的宝藏路径：从示例到迷你项目

很多新手跟着文字教程学，看完就忘，动手写还是不会，没关系，官方GitHub早就准备好了动手练手的地方,不用再去第三方网站找乱七八糟的示例。

先啃仓库里的官方“小例子集合”

除了playground里的预设示例，仓库顶层还有一个examples文件夹（对，刚才忘说了顶层还有个examples），这里的示例更贴近真实项目，但代码量又很小，很适合新手一步步拆解学习，比如examples里的todo-mvc，就是用Vue3 Composition API + Pinia（哦对，Pinia也是官方团队做的，虽然不在vue仓库，但在同一个GitHub组织里）写的经典待办清单，涵盖了数据绑定、列表渲染、条件渲染、事件处理、状态管理这些Vue开发的核心知识点；还有examples里的composition-api，专门对比了Vue2 Options API和Vue3 Composition API的写法,对过渡开发者太友好了。

进阶迷你项目？可以看组织里的starter模板

刚才提到Vue官方有自己的GitHub组织，名字叫vuejs，除了核心的vue仓库，组织里还有很多官方维护的工具和模板，比如vitejs/vite虽然不是vuejs组织的，但官方推荐的Vue3快速启动模板，全是基于Vite的，而且在vuejs组织里有专门的仓库叫create-vue，这就是我们平时用npm create vue@latest命令启动的那个脚手架的源码！更重要的是，create-vue仓库的README.md里，详细列出了所有可以选择的模板配置，比如TypeScript、JSX、Pinia、Vue Router、ESLint、Prettier、Vitest、Cypress等等，新手如果不确定某个配置要不要加，可以先看README里的说明，或者直接用默认配置搭一个项目,慢慢探索。

除了create-vue，组织里还有一个叫vue3-realworld-example-app的仓库，这个是RealWorld项目的Vue3实现版本！RealWorld项目是什么？简单来说就是一个真实的博客平台，前后端分离，涵盖了登录注册、文章发布、评论、点赞、关注用户这些真实项目的常见功能，而且代码质量很高，完全符合Vue3的最佳实践，新手把这个项目clone下来，先跑通，再跟着代码注释一行行看,比看十本入门书都有用。

进阶开发者必看：源码之外的进阶资料和工具

新手入门靠示例，进阶开发者就要深入原理，或者提高开发效率了，除了vue目录里的核心源码,vuejs组织里还有很多进阶的宝藏。

深入原理？看官方的设计文档和会议视频

在vue仓库的.github/rfcs目录里，全是Vue3的设计提案（RFC是Request For Comments的缩写，也就是请求社区评论的文档），比如Composition API、Teleport、Suspense、Script Setup这些Vue3的核心新特性，都是先在这里发布RFC，然后收集社区的意见，再修改完善，最后才正式发布的，RFC里不仅有新特性的用法，还有为什么要设计这个新特性、设计思路是什么、和其他方案的对比，甚至还有底层的实现思路，对想深入理解Vue3原理的开发者来说，这是比源码更重要的资料——因为源码只是“怎么做”，RFC是“为什么这么做”。

除了RFC，官方还会把VueConf（Vue官方的技术大会）的视频上传到YouTube和Bilibili，同时在vuejs组织的events仓库里，也会上传大会的PPT和部分演讲稿，这些视频和PPT里，有Vue核心团队成员对Vue3新特性、新工具的深度解读，还有大型互联网公司用Vue3开发的实战经验分享，比如字节跳动用Vue3+Vite重构今日头条App、腾讯用Vue3开发企业级应用的案例,都是非常有价值的进阶资料。

提高开发效率？用官方维护的工具链

刚才提到的Pinia、Vue Router、Vite、create-vue都是官方团队维护的，但还有很多容易被忽略的工具,也在vuejs组织里。

@vue/test-utils：Vue3官方的单元测试工具库，比第三方的测试工具更贴合Vue3的API，写起来更简单,官方文档里也有详细的教程。
@vue/devtools：这个不用多说，Vue开发必备的浏览器调试工具，Vue3版本的devtools功能更强大，不仅可以调试组件的状态和 props，还可以调试Pinia的状态、Vue Router的路由,甚至可以查看虚拟DOM的结构和Diff算法的过程。
volar：Vue3官方推荐的VSCode插件，代替了之前的Vetur，支持Script Setup、TypeScript、JSX等Vue3的所有新特性，代码提示、语法高亮、错误检查都比Vetur更准确。
vue-language-server：volar的核心依赖，如果你用的不是VSCode，而是其他支持LSP（Language Server Protocol）的编辑器，比如WebStorm、Sublime Text,也可以安装这个插件来获得和volar类似的体验。
vue-tsc：Vue3官方的TypeScript类型检查工具，可以在命令行里检查单文件组件的类型错误，不用依赖编辑器的插件，非常适合CI/CD流程。

遇到问题怎么办？别只看百度，去GitHub的issue和discussions里找答案

很多开发者遇到Vue3的问题，第一反应就是去百度或者Stack Overflow搜，但其实GitHub的issue和discussions里，往往有更准确、更及时的答案。

找已知问题？看仓库的issue

在vue仓库的issue页面，先点一下“Closed”标签，因为大部分常见问题已经被解决了，搜索的时候，可以用关键词组合，Composition API ref reactive 区别”“Teleport 不生效”“Suspense 异步组件”，如果搜不到，可以再用英文关键词搜，Composition API ref vs reactive”“Teleport not working”“Suspense async component”，如果还是搜不到，再考虑提交新的issue，但提交issue之前，一定要先看issue模板，按照模板的要求填写问题描述、复现步骤、运行环境（比如Vue版本、浏览器版本、Node版本）、最小复现仓库链接,不然核心团队成员可能不会理你。

交流经验、提建议？看仓库的discussions

之前Vue仓库只有issue，主要用来提bug和功能请求，但2020年之后，GitHub推出了discussions功能，官方就把Vue仓库的非bug、非功能请求的内容，都移到了discussions里，discussions分为几个板块，Q&A”（专门用来提问，社区里的开发者和核心团队成员都会回答）、“Ideas”（专门用来提新特性的想法，比issue更自由）、“Show and tell”（专门用来分享自己用Vue3开发的项目）、“Announcements”（官方发布的重要公告），新手如果有什么简单的问题，或者想分享自己的学习心得，都可以去discussions里发帖,社区氛围非常好。

想参与Vue3的开发？贡献自己的力量

如果你对Vue3的源码很熟悉，或者想为开源社区做贡献，也可以参与Vue3的开发，具体的贡献流程，在vue仓库的CONTRIBUTING.md文件里有详细的说明,大概分为以下几步：

先fork一份vue仓库到自己的GitHub账号下。
把自己fork的仓库clone到本地。
安装依赖（官方推荐用pnpm，因为pnpm的安装速度更快，而且依赖管理更严格）。
创建一个新的分支，分支名要清晰，比如fix/watchEffect-bug、feat/add-new-composable。
在新的分支上修改代码，然后运行pnpm test确保所有测试用例都通过。
提交代码，提交信息要符合Conventional Commits规范，比如fix(reactivity): 修复watchEffect在SSR环境下不触发的bug。
把自己的分支推送到自己fork的仓库里。
在vue仓库的PR页面，提交一个新的PR，PR的标题和提交信息一样，内容要详细说明修改了什么、为什么这么修改、有没有测试用例覆盖。
等待核心团队成员的审核，如果有修改意见，按照意见修改，直到审核通过,代码就会被合并到主分支里。

参与Vue3的开发，不仅可以提高自己的技术水平，还可以认识很多志同道合的开发者，甚至可以获得Vue官方的贡献者徽章,是一件非常有意义的事情。

Vue3官方GitHub仓库是一个巨大的宝藏，新手可以通过README.md、examples文件夹、create-vue模板快速入门，进阶开发者可以通过RFC、核心源码、VueConf视频深入原理，遇到问题可以通过issue和discussions找答案，甚至可以参与Vue3的开发，贡献自己的力量，希望今天的分享能帮到大家,让大家的Vue3学习之路更顺利。