【vue3源码学习】如何开始源码学习及调试环境的安装？

源码学习的方法

（1）主线型

我们在学习一门新的语言的时候，由于知识盲区太大，知识点太杂乱无章，这时候盲目去学习的话就像走进一座知识迷宫一样，越走越远越学迷糊。

但如果我们确定一条主线，整个学习过程围绕主线展开，不要被分支知识带偏。举个例子：我们学习 vue3 源码，那第一条主线就确定为如何创建实例以及如何挂载，然后就按照这条主线去源码中寻找答案。

（2）思维导图

从整体出发，将源码的知识以思维导图的形式记录下来，帮助我们快速了解源码结构，加深理解，方便我们整理学习路径。

（3）问题导向型

这种就是根据面试题，重点去源码中寻找解决问题的关键点。
这里分享一个前端大咖整理的关于面试中源码的问题及答案：链接地址

(4)造轮子

这是比较重要的一环，我们已经学习了很久，那么怎么检测是否掌握了这些知识点呢？那就是自己动手造一个轮子，结合以上的学习过程，只要能造出一个简单的轮子，把项目跑起来，就说明你是真的掌握了。在造轮子的过程中，同样会加深自己对知识点的理解与记忆。

（5）费曼学习法

这种也是最简单原始的方法，学习之后尝试主动输出，无论是写文还是做视频，只要能把相应知识点讲明白让其他人可以跟着你学会，那么你就出师了。因为越讲解，你的理解越透彻。

学习方法就分享到这里，下面正式开始启动源码学习。

启动项目源码

（1）克隆源码

git clone https://github.com/vuejs/core.git

注意这个官方地址，不要克隆错了。

（2）安装依赖

vue3 的包管理工具变成 pnpm 了，所以安装的时候也要使用 pnpm，这里需要注意一下。

（一）安装 pnpm，这里要使用管理员权限安装

npm i pnpm -g

在安装依赖之前，我们要修改一下 package.json 的配置。

删掉 puppeteer 依赖，这是一个无头浏览器，puppeteer是一个Node库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

• 访问页面，进行截图
• 自动进行键盘输入，提交表单
• 模拟点击等用户操作

因为它比较大，安装耗时比较长，这里我们用不到这些功能，所以暂时去掉了。

（二）安装依赖

pnpm install

(3) 启动项目

启动项目之前，修改一下脚本，方便定位源码位置

"dev": "node scripts/dev.js --sourcemap"

启动项目

pnpm run dev

(4) 打包

pnpm dev

命令执行之后，在 packages/vue/dist 路径下看到vue.global.js 就说明打包成功了。

（5）开始测试

packages/vue/examples 路径下就是 vue 的示例了，我们可以打开一个项目来看一下代码的执行过程。

这里我们选择 todomvc.html，用浏览器打开，通过控制台的 sources 就可以看到代码的执行过程了。

题外话：

可以通过打断点的方式，打完断点刷新页面就可以按下一步跟踪代码。

点击下一步之后，可以看到光标跳到下一步，此时右击选择第一个跳转到对应的源码位置。这样我们就可以去源码中找到对应的文件，学习源码思维了。

到这里我们就成功打开了 vue3 源码学习的大门。小伙伴们，快快学习起来吧。