古语云:眼过千遍不如手过一遍。边调试边学习代码,进步更快。
预备
拉取官方代码
1 | git clone https://github.com/vuejs/vue.git |
安装依赖
打开 vue 目录,使用
1 | yarn |
或
1 | npm i |
安装依赖。
从 package.json 开始
package.json 乃项目之根本,此文件涵盖项目的配置信息及其依赖包。
在 package.json 中,本次学习主要使用 script
字段中的 dev
命令:
1 | "scripts": { |
此命令使用 rollup
在 /dist
目录打包输出完整版的 vue.js
。因打包后的 vue.js
时压缩过的,故而运行此命令前,需在命令中加上参数 --sourcemap
,可同时生成名为 vue.js.map
的映射文件 ,以便调试时看到原始代码。
1 | "scripts": { |
寻找入口
在 Vue 项目中,首先会使用 new Vue()
创建 Vue 的实例,因此可直接编写案例打断点来找到 Vue 的构造函数。
另一种方法是通过 rollup 配置文件一步步找寻,但打断点更直截了当。
案例可以放在 /examples
目录下,便于集中管理:
1 | <!-- /examples/test/init.html --> |
在浏览器中打开当前测试案例,在第 17 行打断点刷新并单步进入:
当前显示的即 Vue 构造函数所在文件:
若想定位当前文件在源码目录中的位置,可如上图,右键选择 边栏中显示
即可在左侧看到 Vue 构造函数在 /src/core/instance/index.js
。
至此,入口已寻得。