碰到緊急項目挪別人的vue項目過來直接改，但是vue是18年初看過一遍，18年底再來用，早就忘到九霄雲外了，結果丟臉的從打開vue開始學，雖然之前在有道雲筆記做了很多記錄，然後沒有系統整理。所以借這次機會鍛煉自己快速上手能力，順便整理vue相關的資料。

如何快速上手，三個訣竅：去碰問題+提出問題+有效篩選搜索信息。

一來就碰到的問題：按照慣例，直接在chrome打開項目最外層的index.html。沒反應，咋回事，突然想起來好像要啟動什麽才行。

如何打開vue項目？

網上搜索如何打開vue項目，記錄下來vue學習一：新建或打開vue項目

在chrome打開頁面後，在控制臺查看自己要改的部分，在頁面結構找到對應的部分去項目代碼裏面找，找得我一臉懵逼

頁面和代碼裏不一樣的節點哪裏來的？

先觀察了頁面鏈接，找到對應的頁面文件，再看來下其他頁面文件，你會發現代碼書寫規律：

都有import，export default這種關鍵字，然後import後面的單詞，在頁面也有規律的在使用，這就好辦了

針對這兩個關鍵字查一波，涉獵到了AMD、CMD、Common規範， ES6模塊的導入和導出，最後還有一篇讓我明白我之前學ES6的方法有蠢的文章：es6常用語法

反面教材學習經驗：以前按照ES6官方文檔學到對象擴展那裏，每句話都要讀懂（自以為懂╮(╯▽╰)╭），每個代碼看懂，做了大量筆記，但是機頂盒開發用不上，也就忘了。其實知道常用，好用，為什麽需要用，的那些語法就行了。

　 知道了模塊的導入導出後，那麽我要知道導出的這個東西在這個頁面幹嘛的？

我看被放到了components裏，然後在頁面又放到了節點裏面，就去搜索這個關鍵字components，了解到了組件的知識，但是網上定義組件都有幾種方法，我就再觀察項目的組件看屬於哪種定義方式——單文件組件。

至此，vue一大核心——組件就被我發現了，就有了vue學習之組件

頁面的組成現在就知道了，接下來是數據部分。

數據是怎麽來的，怎麽渲染到頁面上的？

平時開發項目，頁面呈現數據過程：請求數據，處理數據，渲染數據。跟著這個思路，一路自我提問找線索搜索。

這個得倒著找：從渲染數據的地方開始找，順藤摸瓜找來源。

這裏就涉獵到：

vue模板語法，指令（這兩個都是官網先走馬觀花大概知道有哪些，後續用都是現用現查）

每個組件的數據容器有哪些（props，data等）

如何操作這些數據（computed，method，watch等）

這些都搞定了，然後查找數據源：

之前的組件學習讓我知道了組件之間的數據傳遞和共享： vue學習之vuex

但是數據肯定還有ajax請求來的，這個在頁面代碼裏不好看出來，就直接在網上搜索的vue使用ajax請求。就涉獵到了：vue學習之生命周期和鉤子函數

至此，我認為差不多搞定了使用vue展現頁面的基本套路。

後續就是路由，組件緩存，事件等方面的知識，同上，都是一路觀察+自我提問+合適的搜索解決的上手問題。

但是！！！！！！！！！！最後居然把我調去負責這個項目機頂盒端的開發，移動端就又這麽完美錯過。。。。。。。

平時的積累真的很重要，你腦袋記不住東西沒關系，跟我一樣可以做大量的收藏和筆記，技術到用時才不會方恨少。

千萬不要讓自己呆在一個舒適區，前端新技術層出不窮，改朝換代也快，不說學習，至少隨時關註了解，多逛逛社區，看看別人做的東西，這樣選技術方案的時候，才不至於不會盲目跟風。

做項目就跟織毛衣一樣，接到需求的時候就跟拿到一團打結的毛線，先找到線頭，從線頭順藤摸瓜把打結的地方都梳理開，線梳理好後，再根據你要的成品考慮選擇用什麽材質和粗細的針棒來織，然後考慮選擇怎麽個織法最便捷快速。

這些針棒和編制方式來源於你的積累：

常逛的園子：博客園，開源中國，csdn，segmentfault等

技術問答網站：stackoverflow

找輪子，看新奇：github，codepen，runjs

沒事幹的時候技術升級打怪網站：freecodecamp

幫別人解決問題同時提升自己，歡迎加入這個溫暖的群，群相關信息：https://www.kancloud.cn/jsfront/month/82796

資料收藏技巧：關註“前端早讀課”，“前端大全”等公眾號，每天早上吃個飯或者坐個地鐵搭個電梯的時間就能看幾篇文章了，把自己想收藏的技術文章分類收藏到有道雲筆記，需要查什麽的時候可以在有道雲筆記搜索，想要學什麽的時候可以搜出一大堆，把別人的總結起來變成自己的知識體系。

如何快速上手一個新技術之vue學習經驗