背景
昨天小組裡面一個前端突然找我，說用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打哪裡。
結語
怎麼研究一個架構源碼的方法，我把我個人的總結和了解通過圖文的形式詳細的盡可能表達出來了，還是想讓那些想看架構源碼但是又無從下手的同學不再迷惑，不再通過别人的文章去一知半解的學習了，自己動手豐衣足食，如果有哪些還有疑惑的地方，歡迎在評論區留言，多多交流，衆人拾柴火焰高嘛，加油吧，奧利給。