vue源码下载以及运行

106 阅读1分钟

对于一些小伙伴来说想去阅读vue的源码,但是又不知从何下手?(这个人就是我)以下是阅读源码的正确打开方式。

1. 下载源码

github下载你想阅读源码的版本

image.png

下载完毕以后文件夹目录如下:

image.png

image.png

2. 使用 pnpm下载依赖包,因为vue是使用pnpm进行包管理的

表示下载完毕: image.png

打包:

使用 pnpm run build 进行 vue源码打包

打包前记得在 package.json中 scripts> build 选择中增加 -s 这样可以开启 source-map文件,方便我们进行调试

image.png

打包后会在packages\vue\dist packages中生成一个dist文件夹:

image.png

调试:

在 vue=> examples>创建调试文件

image.png

在文件中引入 Vue中你想要进行调试的模块:

image.png

创建文件后打开记得使用 vsCode的 Open with Live Server 插件进行打开

image.png

打开浏览器控制台 选择 源代码/来源=>网页下选择你要调试的vue模块,然后在指定的位置打断点,就可以看到vue中的某个api具体是怎么实现的了

image.png