将 vue3 源码下载到本地调试
本文正在参加「金石计划 . 瓜分6万现金大奖」
vue3 正式版发布至今，倏忽间竟已两年有余。这么久过去了，如果你还从未对其源码进行过一番研究，那么其实可以去 github 将其克隆到本地，而后就可以像对待平常自己写的项目那样，在某个地方打个 debugger 来调试，从而深入了解 vue3 的运行原理。下面我将需要执行的步骤陈列如下：
1. 从 github 仓库 clone 到本地
前往 vue3 的 github 仓库，然后 clone 到本地。
请注意，最好是 clone 最新的 tag 版本，我写这篇文章时最新版为 3.2.37，所以执行的命令如下：
git clone --branch v3.2.37 https://github.com/vuejs/core.git
2. 安装依赖
因为 vue3.2 使用的包管理工具是 pnpm（采用了 monorepo 的项目代码管理方式），所以我们需要先全局安装 pnpm：
npm install -g pnpm
然后进入已经 clone 到本地的 vue3 源码目录下，执行如下命令安装所需依赖：
pnpm install
请注意不同版本的 pnpm 所需要的 Node.js 版本：
建议最好安装不低于 16.5.0 版本的 Node.js，否则会出现如下图所示的警告：
3. 运行 dev 命令
执行下面代码：
pnpm run dev
脚本执行成功后会在 packages\vue 下生成 dist 目录，里面有 vue.global.js 文件（学习 vue 时，使用 cdn 方式引用的 js 文件就是它）和方便开发调试的映射文件 vue.global.js.map。
如果你仍然用着 win7 的电脑，安装的是 Node.js 12，会遇到语法报错，这是因为执行 pnpm run dev 实际上是通过 node 去执行了 scripts 下的 dev.js，里面写了低版本的 node 不识别的可选链 ?. 语法，按提示手动修改下写法就好。
4. 调试
现在，我们可以在 packages\vue\examples 目录中创建 my-test 文件夹，在里面新建 index.html，引用上一步中生成的 vue.global.js 文件，创建一个 vue 实例挂载到页面中，并开启 debugger。代码如下：
<!-- packages\vue\examples\my-test\index.html -->
<body>
<div id="app"></div>
<script src="../../dist/vue.global.js"></script>
<script>
debugger
Vue.createApp({
template: `<h2>Hello Vue3</h2>`
}).mount('#app')
</script>
</body>
现在我们可以使用 VS code 的 Live Server 插件将上面的 index.html 运行到浏览器中，打开网页调试工具开始调试。比如通过下图所示的 1、2 两个按钮进入到定义 createApp函数的 index.ts 文件，鼠标放到文件名标签上可以查看到文件在项目中的具体位置：
本文正在参加「金石计划 . 瓜分6万现金大奖」