一、下载源码
大家可以点击这里去Vue3的github仓库里下载源码。
- 可以运行下面的git命令把源码克隆到本地。
git clone github.com/vuejs/core.…
- 可以点击
Fork按钮，Fork当前版本的代码到你自己的github仓库
- 建议大家点击这里，然后去运行下面的命令去下载
3.2.27版本的Vue3源码，这样可以保证大家的源码和我之后文章里讲的是一致的
git clone github.com/wudengyao/v…
二、源码目录介绍
- 下图介绍下源码里核心的几块目录，也是我们接下来源码阅读的主要目录
- 下面还有一个很重要的目录
三、配置、打包项目
经过前面几步，我们已经下载好源码，介绍了源码的一些核心目录，接下来我们要去再源码中运行我们的测试实例了。
- 因为vue3源码是通过
pnpm包管理工具进行包管理的，所以我们要先安装pnpm
- 全局安装pnpm
npm install -g pnpm
- 查看pnpm版本
pnpm -v
- 给项目安装所有依赖
pnpm i
- 给项目进行打包
npm run build
打包完成会在package/vue目录下，生成一个dist目录
之后我们的写测试用例的时候是要导入这个包的，这样才能关联到vue的源码。
四、运行测试实例
- 新建测试实例
- 我们要在刚刚的
dist目录的同级目录examples下，新建一个自己的测试目录（随便取个你喜欢的目录名字就行），我是新建了个myExamples目录，然后在myExamples里按文件夹建立对应的测试实例
- 新建了一个
reactive.html文件，之后我们会通过断点调试去debugger分析reactive的源码，我们可以看到，reactive.html里是要导入刚刚打包的dist目录下的vue.global.js,这样我们就可以使用vue相关的api了
- 我们在
reactive.html里，右键通过运行Live Server命令，打开浏览器
- 如果你运行完浏览器出现下面的界面，恭喜你，整个源码测试环境你就搭建成功了
五、配置sourceMap
-
通过上面运行的测试实例，你并看不到
断点调试界面的sourceMap，因为还要去配置下， -
配置package.json文件
只要在scripts下的build命里加一个 -s就能开启sourceMap了，具体的原理就是npm的minimist配置，篇幅有限，我这里就不展开讲了，大家有兴趣的，可以自己去研究下
六、 debugger源码
- 我们在浏览器的
sourceMap目录下找到package/reactivity/src/reactive.ts，在reactive方法里打个断点，这样就可以进行调试了，
总结
好了，到这里整个vue3源码的测试环境就搭建好了，我们之后就可以自己写测试用例，去调试vue3的源码了，下一节开始，我们真正进入vue3源码的分析，下次再见吧。
