背景

昨天小组里面一个前端突然找我，说用vue两年多了，但是好多原理性的都还不懂，我就回了他一句，自己去撸源码呗。结果他居然给我回了两个字“不会”，***what???***然后我紧接着就问了其他几个前端，平时看框架源码，都是怎么看的，通过什么方式呢？结果基本的回答都是：看别人的文章，网上的帖子。我说那不是别人的理解嘛，你看别人的文章又能吸收多少呢，为什么不自己去看看源码，然后自己总结呢，别人的东西能借鉴，但是不能全搬吧？然后他们异口同声的回答：“不会看，不知道怎么看”，汗颜。

前言

在我个人来说，想要理解一个框架的设计思想，肯定得自己深入框架内部去一点点熟悉，然后整体串起来理解，这才是高效，快捷，准确的方法（ps:个人理解，不喜勿喷），但是目前得到组员的反馈都是去看别人的帖子和文章，首先别人可能理解的也是一知半解，或者说人家已经彻底理解了，但是每个人的思想都是不一样的，表达也不一样，那你又能从人家那理解多少呢，而且你能说你理解的就是人家想要表达的正确的思想吗？也不是吧，毕竟同一句话两个人看就是两种意思（ps:中华文化博大精深），所以还得自己真的去框架内部看，只有这样才能更深入更彻底的学习框架的设计思想，而且自己去研究的话印象也比较深刻。

正文

好了，废话不多说，直接上干货（ps:本文只针对目前想了解框架源码，但是又不知道怎么去做的同学，如有说的不对的地方，也欢迎各路大神在评论区及时指正，我会及时修改的，避免影响大家误入歧途）。下面我就以vue框架为例，说一下怎么去看源码。

第一步：下载源码

打开想要下载源码的地址，然后选一个自己想要下载版本，点击code下载zip包（ps:如果想要查看git相关的内容的话可以clone，但是只是查看代码的建议直接下载zip包，快捷，方便） 

第二步：打开源码

把zip包解压，用趁手的IDE打开，npm install下载一下项目依赖包，然后框架的文件夹结构就如下图所示，这些文件夹前期只需要关心examples和src就行。 

第三步：找到入口文件或者核心模块

接下来打开src目录，框架的代码都在这个文件夹里面，可以从图中看出，一共有六个模块，一般框架src下面都会有一个index文件，然后在index文件里面可以有哪些核心模块。然而vue框架不是这样的，但是有个很明显的文件夹core，核心文件夹。  打开core文件夹之后，我们会发现，这里面有一个index.js文件，这时候我们可以打开index.js看看里面是什么内容  根据index.js文件的内容可以看出，这个文件就是vue的入口文件，同样也会看到，Vue对象是instance/index这个文件抛出的。  这时候打开instance文件夹下面的index.js文件，就会发现这是一个初始化方法的入口，然后就可以在这里打debugger，跟着debugger去一步步往下看了。 

第四步：启动项目

既然debugger已经打好了，那就可以npm run dev启动项目在dev-tools里面去调试了。

第五步：通过示例代码去调试

• 这时候就用到了前面提到的examples文件夹里面的东西了，一般这个文件夹里面都会放一些框架的使用示例，框架开发人员也会用这些示例去测试基本功能的实现程度，我们选其中一个去浏览器里面去运行就可以（ps:这里有一个需要注意的点是：示例里面引用的是vue.min.js,咱们需要改成vue.js,原因两点：1.压缩后的代码debugger会被删掉，2.压缩后的代码不方便查看）
• 运行tree文件夹下面的index.html后，在浏览器端会发现进入了咱们刚才打的debugger那里，这时候就可以愉快的跟着断点去一步步往下走了，想看其它模块的话如法炮制，想看哪里debugger打哪里。

结语

怎么研究一个框架源码的方法，我把我个人的总结和理解通过图文的形式详细的尽可能表达出来了，还是想让那些想看框架源码但是又无从下手的同学不再迷惑，不再通过别人的文章去一知半解的学习了，自己动手丰衣足食，如果有哪些还有疑惑的地方，欢迎在评论区留言，多多交流，众人拾柴火焰高嘛，加油吧，奥利给。