如何去学习vue源码，debugger一步步的去读vue源码可能是最有效的了。本文介绍如何去debugger vue的源码。
1. 下载源码安装依赖
// 下载源码
git clone https://github.com/vuejs/vue.git
// 安装依赖
npm i
在项目的examples目录下有很多的demo,随便打开一个，复制index.html路径在浏览器中打开就可以查看。
此时我们demo引用的是vue.min.js文件，在sources file下面也没有vue的src目录源码
2. 为了进行源码debugger做两个改动
- 我们可以看到在这个demo中引用的vue是压缩版本的。我们改成引用/dist/vue.js
// 将demo的引用由
<script src="../../dist/vue.min.js"></script>
// 改为
<script src="../../dist/vue.js"></script>
说明： 当我们本地运行npm run dev时，执行的scripts脚本命令是: "rollup -w -c scripts/config.js --environment TARGET:web-full-dev 参数TARGET:web-full-dev 在scripts/config.js目录下可以看到，vue源代码编译生成后输出到 /dist/vue.js文件中
这样我们npm run dev生成的vue.js文件就是我们测试项目使用的文件。
- package.json文件中 dev脚本命令增加 --sourcemap
"scripts": {
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
...
}
说明： 咱们引用的是vue.js是打包编译后的版本，不是源码；为了可以debugger源码，需要给编译后的代码增加sourcemap。 sourcemap就是一个文件，他存储着源码与编译后代码的一种对应关系。我们可以看到在dist目录下有vue.js文件，同时有 一个vue.js.map文件。在vue.js文件最后一行有 //# sourceMappingURL=vue.js.map
3.运行vue
npm run dev
复制刚才demo的 index.html路径在浏览器打开
此时我们可以随意的进行打断点进行调试了。
