前言
一说起源码,初入前端的同学可能都一阵头大。一开始我也是一样,觉得学源码有啥用啊,我只要知道在哪个生命周期调接口,会用相关的api不就行了。如果你只想一直写一些没有技术含量的业务代码,只想在当前的岗位混下去的话,确实没啥必要。但是只要你想提升,想跳槽,那么学源码几乎是绕不过去的一道坎。
首先,你在面试的时候,面试官基本上都会问你有没有看过什么项目的源码,有没有读源码的习惯等等;其次,学习源码可以加深我们对平时使用的一些api的理解,可能之前我们只知道怎么用这个api,学完源码之后,我们就知道为什么这么用,甚至在工作中遇到的一些难题也会迎刃而解;再次,我们可以学习源码的编写风格和规范,将其应用到我们的工作中,提高代码质量。
当然,学习源码也需要一定的方法。我的方法就是站在巨人的肩上,跟着大佬的脚步~。前段时间杨村长出了一期学习Vue源码的课程,自己就跟着课程学了下来。话不多说,一起卷起来吧!
克隆源码
学习源码的第一步当然是将源码克隆下来了。
Vue3 Git地址:github.com/vuejs/core。
安装依赖
在安装依赖之前,我们需要保证自己的node版本在16.5以上,否则项目是无法运行的。然后我们还要全局安装pnpm,在Vue3.2之后,所有的包管理都切换为pnpm了。安装完成后,运行 pnpm i 即可。
为了节约安装时间,我们可以先将依赖中的puppeteer删掉,再进行安装,这是一个端到端的测试,我们并不需要它。
打包
运行 pnpm dev,如下图,即表示打包完成,可以ctrl+c终止了。
打包完成后我们可以在 packages\vue\dist 目录下找到打包后的代码。
起服务
运行 pnpm serve ,打开 http://localhost:5000 ,即可看到如下界面。
调试
打开 /packages/vue/examples/composition/todomvc.html
F12打开控制台,打开Sources,按ctrl+p,打开todomvc主文件,在createApp方法处打上断点,刷新页面,进入断点,右键,点击 Reveal in sidebar,在左侧就可以看到createApp方法所在的目录和入口文件了。
到这里,我们的调试环境就已经搭建完成了!