前言

想要站在前人的肩膀上并有所突破的话，我们得先研究前人的想法。就前端而言，目前很火的框架有vue，react。我们只有了解了他们的开发思路，才能在日后我们的技术突破中有更多的可能。就像修炼武功，只有了解了武功心法，才能施展招数。

往后我将一点点一步步的仔细研读vue源码，了解其构建思路。

源码地址

万事开头难，有了源码地址我就可以开始开头了：vue源码，vue的源码在GitHub上可以找到，直接在本地将代码克隆下来就可以了。 那么问题就来了：

第一步就出现问题了！ 解决办法： 在git中输入如下命令

git config --global http.sslVerify "false"

然后再克隆就可以了

调试

现在有了源码，如果可以本地调试源码，那看起源码来也方便一些。很多人都是在调试源码这一步卡了好久。按照下面的步骤来，就可以开开心心的调试源码了。

1.安装依赖

我这边的node环境是16.17.0，最好用15以上的node版本，不然依赖可能下不成功！ 好家伙，我上来一个npm i结果： 找到package.json文件，里面有个依赖是这个：

想要npm i @vue/compiler-sfc,但是：

既然npm不行，那就换yarn吧，npm -i yarn -g然后用yarn来下@vue/compiler-sfc。 运行yarn add @vue/compiler-sfc这一步运行时间有点长。 下载好后再次运行npm i。 现在什么报错也没有了！！

2.运行

在package.json文件中找到下面这行命令：

"dev": "rollup -w -c scripts/config.js --environment TARGET:full-dev"

将上面这行命令改为：

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:full-dev"

然后npm run dev,结果：

然后再运行npm i @vue/consolidate。下载好后再npm run dev就可以了：

这时候根目录会生成一个dist，后续调试会用到这个文件中的vue.js文件。

3.调试

vue的源码在src/core中，现在在src/core/index.ts中打个断点：

修改examples/composition/tree.html中script路径，目前的路径是vue.min.js,改为vue.js，用浏览器打开这个文件，刷新浏览器就可以看到自己打的断点了。