摘要
本文主要介绍如何使用 VS Code 编辑器阅读和设置断点调试 Vue 源码。文章所提到的 Vue 源码，指的是 git 分支为 2.6，package 包版本号为 2.5.21 的 Vue 源码。
面向对象
- 使用过 Vue 开发，并对 Vue 源码感兴趣的人（兴趣使然）。
本文作者是最近才开始阅读 Vue 源码，所以文章里面不会涉及 Vue 源码的分析🤣。不过也想在此立个 flag，希望接下来有时间的话可以整理出一个 Vue 源码分析的 thread。
上手准备
开发工具清单
- Vue 源码
- VS Code + vscode-flow-ide 扩展
- Chrome 浏览器
- pnpm
Vue 源码须知
- Vue 是用 JavaScript 编写的，类型系统依赖于 flow 检查器（类 TypeScript 的工具）
- 编译构建工具是 rollup
操作步骤
一、命令行操作
# clone 我 fork 之后的代码
git clone https://github.com/rhzone/vue.git
cd vue
pnpm i
# 构建带 compiler 的 Vue 运行时
npm run dev:esm-full
cd vite-example
pnpm i
二、断点调试例子
打开 src/core/instance/init.js 文件，在 19 行设置一个断点
选择运行 all 的 debug 配置，然后就可以开始愉快的调试啦🎉。
三、安装 vscode-flow-ide 扩展插件
marketplace.visualstudio.com/items?itemN…
为什么要 fork 我的代码，而不是直接用官方的 Vue 仓库代码？
目的只有一个：方便阅读调试，因为我主要做了以下修改
- 将包管理器改为 pnpm，使用其 workspace 特性
- 新增 vite-example 文件夹，方便从实际项目开发的角度调试 Vue 源码
- 配置 jsconfig 的 paths alias 方便代码跳转
- 新增
.vscode/launch.json用于调试配置 - 新增
.vscode/settings.json用于配置隐藏或折叠不关心的文件
为什么看起来少了很多源码文件？
- 原因见上面第 5 点。可以通过注释
settings.json里面的files.exclude和explorer.experimental.fileNesting.patternsJSON 字段来还原。
郑重声明: vite-example 里面的代码风格不是最佳实践的，有些写法仅是因为作者想偷懒写的，请不要轻易模仿并用于实际的生产项目。
