Vue3源码学习笔记——从启动项目到一步步断点调试

Vue3自alpha第一个版本发布到现在已经有两年多了，从一年前项目也都陆续使用Vue3作为主要框架。现在网上Vue3源码分析的文章也不少，但别人的文章写的再好，也要自己动手去实践，去尝试修改代码，查看效果，这是最好的学习方式。

今天分享一个我阅读Vue3源码的方式

1、拉源码到本地

之前的Vue3代码在：https://github.com/vuejs/vue-next

现在已经修改为：https://github.com/vuejs/core

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

2、安装依赖

在项目中的.github/contributing.md文件，我们可以看到Vue官方对源码架构的介绍和对开发的一些介绍。

Vue3需要Node.js版本 10+以上。

并且Vue3依赖是采用PNPM来管理。如果没有安装需要去安装一下。

同时推荐使用ni来自动采用npm/yarn/pnpm方式安装依赖，使用nr来快速运行npm scripts命令。如果没有也推荐大家安装一下，非常的好用。

在做好准备工作之后，我们来安装依赖

pnpm i
# 如果安装了ni
ni

3、运行项目

依赖安装完成，我们就可以运行了，加-s参数，可以生成对应的source map文件，我们可以更清晰的调试源码。

nr dev -s
# 或
npm run dev -s

运行成功

> watching: packages/vue/dist/vue.global.js

这就是编译后的vue3的js源代码，但我们还需要一些例子还跑通它。

4、跑通例子

vue官方为我们提供了很多开发使用的示例，我们可以通过下面的命令来运行它

nr serve
# 或
npm run serve

运行成功如下，默认为5000端口，如果你的5000端口被占用，则会运行其他端口。

Serving!
- Local:            http://localhost:5000
- On Your Network:  http://192.168.0.106:5000

完成了这两步之后，我们就剩最后一步了。

5、使用VS Code调试

点击左侧运行和调试，然后点击Open 'launch.json'按钮

然后点击最右下的Add Configuration...按钮，然后我们选择Chrome: Launch。

添加成功后，注意将url的地址改成，和上面的例子中一样的地址。

修改完成后，我们就可以选择刚才添加的Launch Chrome，然后点击启动

启动成功了，我们可以访问http://localhost:5000/packages/vue/examples/classic/todomvc

Vue3的例子全部都在/packages/vue/examples/文件夹下

我们尝试添加一个断点在/packages/vue/examples/classic/todomvc.html文件中

然后重新刷新页面，可以看到成功进入断点

然后，我在Vue的源码里打一个断点，在packages/runtime-core/src/apiCreateApp.ts中的createApp函数的第一行。

再次刷新页面，也可以进入到断点。

现在我们就可以开开心心一步步的去调试Vue3的代码了。

欢迎我的公众号【小帅的编程笔记】，让我们在前端的路上越走越远