如何调试Vue3的源码

• git clone https://github.com/vuejs/core.git

• 安装pnpm 工具，目前vue3是基于pnpm 进行构建项目的

• 执行pnpm install 命令，安装依赖包，如果使用npm install会报错：

npm ERR! code EUNSUPPORTEDPROTOCOL

npm ERR! Unsupported URL Type "workspace:": workspace:*

• 执行命令pnpm run dev ，即可在dist目录下生成vue.global.js 文件

• 在vue 目录下面创建index.html文件，

head 引入vue.global.js 文件

body添加如下代码

• 使用VS Code 插件 Live Server，安装好了之后，Vs Code 右下角会出现Go Live的文字，点击Go live，会自动打开浏览器，如下图

 此时，我们可以进入开发者工具，点击Sources 页签，即可以看到Vue3的代码结构如下：

 这时候我们就可以进行代码调试了，比如在packages/runtime-core/src/renderer.ts文件patch 方法设置个断点，再点击界面上的add 按钮：