「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
Vue3大侠修炼手册2- 搭建源码调试环境
题记
上篇文章我们写了学习Vue3源码的学习方法，本期开始我们将正式一步一步去在实践中不断解开Vue3给我们的一个又一个谜题。工欲善其事必先利其器,在本期手册里，我们将手把手搭建一个Vue3的源码调试环境。 我们调试源码的IDE为Visual Studio Code
Clone 源代码
第一步我们要执行以下命令克隆Vue3 github仓库中的源代码。
# 使用 ssh
git clone [email protected]:vuejs/vue-next.git
# 或者使用 https
git clone https://github.com/vuejs/vue-next.git
复制代码目前我在写这篇手册时，Vue3的版本号为 v3.2.27。
使用 pnpm 安装依赖
由于Vue3项目已经舍弃npm命令，而使用pnpm来进行包管理，所以我们要使用
# 在项目所在的文件夹中
pnpm install
复制代码来安装项目的包依赖
如果没有安装pnpm的小伙伴可以全局安装一下，在这里我也附上 安装 pnpm的命令( MAC版)
brew install pnpm
复制代码Tips: 由于众所周知的原因，可能在install的时候失败，如果你的网络状况不是很好，可以删除掉 package.json文件中 devDependencies中的 puppeteer这个包，因为这个端对端的测试工具包，非常大，而且我们在修炼的过程中并不会需要它
打包 dev 环境代码
我们接下来要在 dev环境下进行调试，所以我们可以直接运行以下命令进行代码打包
pnpm dev
复制代码这里值得注意的是vue3的项目启动需要支持比较高的node版本，如果你出现了和下图类似的警告，请升级你的 node版本至 >=16.5.0。
若控制台没有在出现 Warning 证明我们已经配置良好，完美符合Vue3的运行打包条件。 从上图我们也可以看出 我们打包后的文件为
packages/vue/dist/vue.global.js。
启动 serve
接下来我们来启动一个静态服务器来运行pakcages/vue/example中的例子，这些都是一些比较简单的用例，可以帮助我们很好的知道vue3到底如何运行的。
pnpm serve
复制代码比如，我们进入了composition/todomvc.html这个页面下。
当我们进入到该页面下时，打开我们的控制台，在控制台的 Tab中找到 Sources并点击，此时我们会看到如图所示内容
然后我们使用快捷键⌘ + p打开todo主页，然后搜索todomvc，然后点击进入到该文件中。
由于我们要学习Vue3的源码，所以我们找到文件中的vue3入口，也就是createApp方法，并在此打上断点。
在这里有个小技巧，如何在sources中的侧边栏定位到我们当前的文件呢？ 我们可以鼠标右键，然后会出现一个菜单栏，点击Reveal in sidebar这样就可以在侧边栏找到我们的文件啦。
结束
好了，看到这里，我们今天的任务也就完成了，我们在vue-next这个库的基础上，已经搭好了我们的源码调试环境，小伙伴们可以玩一玩，看看代码的运行过程。 接下来，我们将分析 vue3源码中的整体架构，大家是不是已经跃跃欲试了呢~