「这是我参与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
源码中的整体架构,大家是不是已经跃跃欲试了呢~