1.前言
本文內容講解的內容：一張思維導圖輔助你深入瞭解 Vue | Vue-Router | Vuex 原始碼架構。
2. Vue 全家桶
先來張 Vue 全家桶 總圖：
3. Vue
細分如下
原始碼目錄
原始碼構建，基於 Rollup
Vue 本質：建構函式
資料驅動
元件化
深入響應式原理
編譯
擴充套件
4. Vue-Router
introduction
路由註冊
VueRouter 物件
matcher
路徑切換
5. Vuex
introduction
Vuex 初始化
API
外掛
6. 已完成與待完成
已完成：
- 思維導圖
待完成：
- 繼續完善 思維導圖
- 新增 流程圖
因為該專案都是業餘時間做的，筆者能力與時間也有限，很多細節還沒有完善。
如果你是大神，或者對 vue 原始碼有更好的見解，歡迎提交 issue ，大家一起交流學習，一起打造一個像樣的 講解 Vue 全家桶原始碼架構 的開源專案。
7. 總結
以上內容是筆者最近學習 Vue 原始碼時的收穫與所做的筆記，本文內容大多是開源專案 Vue.js 技術揭祕 的內容，只不過是以思維導圖的形式來展現，內容有省略，還加入了筆者的一點理解。
筆者之所以採用思維導圖的形式來記錄所學內容，是因為思維導圖更能反映知識體系與結構，更能使人形成完整的知識架構，知識一旦形成一個體系，就會容易理解和不易忘記。
注意：文章的圖片可能上傳時會經過壓縮，可能有點模糊，不過本文用到的 所有 超清圖片 都已經放在 github 上，而且還有 pdf 格式、markdown 語法、思維導圖 的原檔案，自己可以根據 思維導圖原檔案 匯出相應的超清圖片。
筆者文章常更地址：github
8. 最後
傳承至善
如果你覺得本文章或者專案對你有啟發，請給個贊或者 star 吧，點贊是一種美德，謝謝。
參考開源專案：