「这是我参与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
这时就可以通过 http://localhost:5000 访问 web 站点了。
调试
依次进入 packages > vue > examples > composition > todomvc.html。
打开浏览器开发者模式,查看源文件,cmd + p 打开 todomvc。
找到 createApp 方法调用的地方,添加断点
然后刷新页面,进入断点后点击下一步,当前文件右键->在边栏中显示,runtime-dom/src/index.ts,这里就是整个程序的入口,如下图。
至此我们就完成了阅读 vue3 源码的准备工作。