「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」
环境搭建
要阅读和调试,首先得下载源码。
克隆源码
但是就连克隆代码也会出问题,各种千百度了一番,无果。于是,试试国内镜像 hub.fastgit.org/vuejs/vue-n…。 终于下载好了。其实我几个月前还能正常下载的。
安装依赖
vue3已经改用pnpm包管理器了,所以需要pnpm ,没有就直接用本来的包管理器安装即可。 全局安装了pnpm 之后, 开始运行 pnpm i ,出错了。真是好事多磨。
原因是node版本不支持。pnpm.io/installatio… 这个网址查看pnpm的node相关版本。
支持node12的啊。仔细一看是小版本没跟上,最低要求12.17 ,我刚好是12.16,这就有点那什么了。当场升级 mirrors.huaweicloud.com/nodejs/
换上了12版本的最高版本(因为鄙人用的是win7),成功使用pnpm安装了依赖!。
不得不说一下,这pnpm 的安装日志, 看起来真的是一目了然。
接下来, 试运行 pnpm dev
看起来没啥问题 这就是一个实时打包,代码改动后就会重新打包。
打包文件只有一个global.js 为了便于调试 ,需要改变打包方式
添加soucemap
在打包命令后加 —sourcemap. 再次运行 pnpm dev 可以看到打包文件多了一个global.js.map。因为运行时的代码是已经打包过的,也就是经过了编译、压缩处理。即便打了断点,也进不到原来的代码里,而sourceMap可以根据打包后的代码定位到打包前的代码位置。 所以,我们需要在后面加上 --sourcemap
然后运行 serve命令 自动本地服务 。结果就和启动了liversever是一样的
断点调试
找一个demo文件打开,在初始化vue实例的地方,打个断点,f9或者f11, 可以看到 能成功进入源码
明确主线
主线就是主要任务, 两点论和重点论说得好,既要看到主要矛盾又不能忽视次要矛盾,但是主要是抓住主要矛盾。 尤其是我这种小白阅读这样的代码,可能一不小心就陷进去了,忘了自己要干啥。
目前的主要任务定为,了解vue实例化过程,挂载过程。也就是那一行代码
应用程序实例创建过程
1 createAPP()
2如何创建实例, 实例有哪些组成
挂载过程
vm.mount(el) 挂载过程都做了些什么
方法 单点调试 查看调用栈