一同养成写作习惯!这是我参加「日新计划 4 月更文挑战」的第2天,点击查看活动详情。

一、前语

因为自己最近预备学习vue的源码,所以首先我得知道怎么样去本地调试vue得源码。后续也会把学习中遇到得问题、校验整理成文章,也当作自己的学习笔记。

写在前面,我看的版本是"version": "2.6.14"

二、怎么进行本地调试

  • 首先咱们找到vue2的源码地址进行本地clone
  • 然后装置依赖我运用的是yarn,可能你装置的进程中会报错,然后我运用了vpn装置成功;接着yarn dev跑起项目。

还不会Vue2.x源码本地调试!

这个时候vue的源码启动了,你可以进行代码的调试了。

还不会Vue2.x源码本地调试!

examples文件夹下有一些官方给的比如,你也可以新建自己的文件去调式代码。

首先咱们看官方的这个比如vue\examples\commits\index.html,咱们修正一下vue文件引入:

还不会Vue2.x源码本地调试!

浏览器翻开它(假如你运用的是vscode装置插件open in browser,右键在浏览器翻开)。

这时候你可以在源码中debugger代码

还不会Vue2.x源码本地调试!
还不会Vue2.x源码本地调试!

假如你觉得这样调试有点不方便,你想直接在浏览器上面打断点进行调试的话,咱们需要在脚本命令添加--sourcemap,如图所示,然后重新启动一下yarn dev

还不会Vue2.x源码本地调试!

这时候改写浏览器页面,F12可以看到sources下可以看到vue的代码了,假如你就可以在你想要调试的地方打断点调试了:

还不会Vue2.x源码本地调试!

现在咱们现已知道怎么去调试代码了,下一步便是阅读源码去学习了;学习源码是一件枯燥甚至会感觉烦躁的进程,希望都可以静下心来耐性学习,当你习惯之后一定有不少的提升~