最近我本人也在學習一些新技術：webpack + vue全家桶。實際上它倆從去年就開始很流行了，今年已經不算新了。但我之前並沒有在專案中使用。
前端框架更新頻率快如瘋狗，有時候會給我們前端er帶來心理上的恐慌：艾瑪，又出新框架了，要不要開始學呀！我對此的看法是，知其存在、保持關注、不必跟風。所以我到現在才開始學習vue也不覺得丟人，敢講出來。今天跟大家分享一下，我是如何從零開始學習一個框架的，希望能給大家帶來一點收穫。
平時留意相關新技術
先說一點題外的，對於新技術，我不會立馬跟風去上手，但是會關注一些關於它的動態，比如說新版本釋出啦，有配套框架啦等等。比如vue最近釋出了2.0版本，餓了麼團隊打造出了一套基於vue2.0的UI框架。
保持一個關注即可，這樣等你需要上手的時候，起碼知道目前的大環境是怎樣，哪裡有好的資源。我主要通過微博來獲取這些資訊，我關注了很多圈內大牛，基本上業界訊息不會遺漏。
搜尋中文資料
對於新框架，我還是習慣先搜一下國內的資料，目的是對框架先有一個整體概覽。這個階段主要是先在腦中形成一幅藍圖，知道這個框架是如何從頭到尾搭建的，有哪些坑需要注意，以及國內的使用者都是如何評價它的。
我不介意用百度，有時候也google中文，總之，能得到中文參考資料就行，畢竟讀中文要比讀英文快很多。因為這個階段的目的就是快速有一個整體把握。所以一般會搜「教程」「入門」這樣的關鍵字。
這個時候我也不著急動手寫，再進行下一步。
通讀官網文件
官方文件是一定要讀的，否則你不知道遺漏了什麼重要東西，也不知道國內的作者是不是寫錯了什麼。這是原汁原味的一手資料，官方文件一般都會分guide和api兩類。guide是引導你從頭開始一步步使用框架的主要功能，api則是所有功能的一個彙總文件。
guide一定是通讀，從how to install開始，不要嫌麻煩。原因很簡單，你要知道如何「標準」的使用框架。在上一步搜到的中文資料中，可能有一些作者對框架的理解有出入，寫的demo程式碼不是官方推薦的寫法，如果你直接copy走，那就永遠無法知道使用框架的正確姿勢，原作者哭暈在廁所了。
api的話，文件量一般會很多，大概掃一掃就行，等使用的時候具體查閱。
動手搭建小專案
對民間的教程以及官方的文件瞭然於胸之後，就可以開始動手搭建一個小專案了，或者是小demo（看具體框架）。
如果官方的guide說的比較具體，我會參照官方的步驟來。或者此時再動手找一些資料，參照別人的操作步驟來，有一些質量高的文章會解釋的很清楚，比官方的全。
說到高質量的資料，就不得不看一些英文的了。我們最熟悉的兩個國外網站應該是github和stackoverflow了。對照谷歌翻譯，閱讀上面的文章還是沒什麼壓力的。如果有，那就逐字翻譯...
告訴大家一個祕密，github上不光只是程式碼倉庫，還有很多資源收集型別的專案，想必有些同學是看過的。後來這些專案搞了一個不成文的規矩，統一都叫awesome-xxx，比如awesome-vue、awesome-webpack、awesome-react等等，上面的資料又全又質量。你要搜任何框架的資源，都可以在github上搜awesome加它的名字。
至於搭建什麼樣的小專案，我一般是把公司的專案抽出一個小模組來，作為一個單獨專案來實踐新框架。這樣最省事，而且以後這個新框架說不定還能借機上位。
去QQ群、論壇吧
實踐新框架的過程中，難免會遇到一些問題，需要請教有經驗的大牛。這個時候可以找一些QQ群，比如vue交流群之類的“專科醫院"，或者可以找相應的論壇，只不過現在國內沒幾個高質量的前端論壇，其實我一般也不去。能在QQ群找到答案當然是好的，如果沒有的話，自己用google各種搜吧，或者是在github上的issue裡面找關鍵字，據我的經驗，總能找到解決辦法。
實在不行，就找個大牛的部落格，給他留言吧。或者，關注我的微信公眾號：doctor_programmer，給我留言。（內心戲：順理成章的就打廣告了，厲害）
視訊教程有必要看嗎？
有些同學是喜歡看視訊教程的，手把手嘛，更容易理解。但是缺點就是看視訊耗時太長了，而你的時間也有限，畢竟不是念書的時候了。
我個人的話，除了剛開始學程式設計的時候看過馬士兵的java教程，後來就基本沒看過視訊了。除了學cocos2d-js的時候，原因是遊戲開發這塊沒怎麼涉及過，這個框架又太複雜，我自己都沒法寫出個hello world，官方文件那叫一個爛啊。只得跟著視訊一步步來。
所以我的建議就是，如果你對學的框架一無所知，而且無法下手，可以看視訊教程。其他的話，能看文件解決的就儘量節省時間吧。
談談看原始碼
有些同學會覺得看了原始碼就很厲害的趕腳，所以迫不及待想看框架的原始碼。這個我是不反對的，閱讀原始碼確實能學到很多知識，關於框架的，以及框架之外的js技巧。
但是我本人來講，看的原始碼並不多，主要還是時間精力分配問題。好比是你買了一輛車，剛開始肯定是先開，熟悉車的各種效能和功能。而後出問題了或者是想深入研究了，再拆。所以我一般是用過一段時間後才看原始碼，這“一段時間”可能是兩個月，也可能是半年。
我看原始碼也不是通讀，一般是帶著疑問看的，比如想看看某個功能是如何實現的，就crtl + f一路搜尋關鍵詞。
有時候如果對框架的某個功能感到奇怪，也會去開啟原始碼看看。比如：用js原生的innerHTML嵌入<script>標籤的時候，裡面的程式碼不執行，但是用jquery的html()方法，嵌入的<script>卻能執行。開啟原始碼才知道，html()方法最終會正則匹配到<script>標籤，並用eval()執行裡面的程式碼。
關於新框架的學習，大概就說這麼多吧，讀者有疑問可以留言討論。