Day 2 - Veu3 源码学习 - 环境准备

274 阅读1分钟

「这是我参与2022首次更文挑战的第40天,活动详情查看:2022首次更文挑战

克隆 Vue3 源码

vue3 正式发布后,vue-next 已经改名为 core,默认安装的就是 vue3。

git clone https://github.com/vuejs/core.git

安装 pnpm

vue3 的包管理工具换成了 pnpm,安装依赖前先全局安装 pnpm。

npm install pnpm -g

安装依赖

pnpm install

修改 dev 脚本

调试的时候需要看源码,所以修改 package.json 文件的 dev 增加 --sourcemap 参数。

"dev": "node scripts/dev.js --sourcemap"

开始打包

pnpm dev

命令行里显示 watching: packages/vue/dist/vue.global.js 则打包成功。

启动 web 服务

pnpm serve

image.png

这时就可以通过 http://localhost:5000 访问 web 站点了。

image.png

调试

依次进入 packages > vue > examples > composition > todomvc.html。

打开浏览器开发者模式,查看源文件,cmd + p 打开 todomvc。

找到 createApp 方法调用的地方,添加断点

image.png

然后刷新页面,进入断点后点击下一步,当前文件右键->在边栏中显示,runtime-dom/src/index.ts,这里就是整个程序的入口,如下图。

image.png

至此我们就完成了阅读 vue3 源码的准备工作。