1. github 安装源码
2. 安装依赖
2.1 pnpm
使用 npm i
遇见报错：
实际上使用pnpm进行安装：
2.2 安装 pnpm
npm install pnpm -g
2.3 为什么 vue 采用 pnpm ？
3. 运行 vue3
大致浏览一下 vue3 的项目结构，发现vue3是使用ts进行开发的，没咋学过ts，不过这都没关系，边看边学ts。
3.1 浏览package.json
忽略其他的命令，关注dev和build，这俩眼熟。
顾名思义，如果我们想调试vue源码，就使用 dev 命令，如果要打包使用，就用build
3.2 在开发环境下运行vue3
使用命令：npm run build
终端里有这样的提示语句，指向了文件vue.global.js.
根据这个路径 dist 可以联想到，这个文件很可能是类似于打包产物 bundle.js 文件的东西，所以找到这个文件；
果然，定义了一个Vue的全局对象；
3.3 进行测试
在dist新建一个index.html文件，并引入这个 vue.global.js 文件
在 vue.global.js 文件中加一个测试语句：
再在浏览器中打开 index.html 文件，控制台里就会打印 hello vue
4. 修改源码
因为引入的 vue.global.js 是一个打包生成的产物，所以真正的源码不在这。
4.1 定位源码文件
根绝 package.json 中对于 dev 命令的定义，定位到 dev.js 文件。
4.2 dev.js
大致浏览了一下 dev.js ，里面正在进行一些开发环境的配置。
根据这段注释可以，vue3 在构建开发环境时，使用的是 esbuild，而在进行生产环境打包时，使用的是rollup（但是笔者只会 🤏webpack，不过这没问题，因为这些项目构建工具在使用的大致思想上都差不多）。
看一下 esbuild 的配置信息，实际上的入口文件就是：
[resolve(__dirname, ../packages/${target}/src/index.ts)]
这句代码拼凑的文件。
而 target 这个变量的值默认的是 vue，当然可以在命令通过输入修改，以及自己手动修改。
4.3 入口文件
那么顺着这个思路，比如我要调试vue的核心代码，那么就是找到package/vue/index.ts文件查看。
很明显，**DEV 这个变量表示当前环境是否为开发环境，在上一节的 esbuild 的配置中也有体现。**
****在ide中跳转到 initDEV 这个函数中
就跳转到了dev.ts文件中，我们加上测试语句：vue entrypoint ，因为 esbuild 支持热更新，所以当文件更新后，这句话也会立即打包到 vue.global.js 文件中，并在浏览器中打印。
同样的，一段关于环境的提示语句也会打印出来。
5. 调试
至此，就可以愉快的进行vue3源码的阅读调试了。
