從上周三到這周五，我用了9天入門vue，做了一個todolist，這速度著實不算快，但是對于一個編程新手來說卻也是步步艱辛，不斷碰到新名詞然后去查閱去學習，不知不覺又把技能樹點亮不少。9天以前我還只有不足三個月的編程學習經驗，對于ES6并無了解且沒有框架經驗，只會跟著教程寫一些基本組件。這幾天按照公司的技術棧去一個個探索，終于寫出了一個demo。
這個demo的技術棧是vue+vue-router+vuex+element-ui+axion+sass+es6，我將會以時間流水賬的形式來寫，看起來會很啰嗦，只是希望從小白視角去展現踩到的坑和學到的經驗。
熟悉mac
首先我熟悉了mac的基本操作，因為之前在windows環境開發，所以不太適應，復制粘貼找不著，菜單欄不知道在哪里，文件系統沒有盤符只能靠搜索，文件刪除了無法恢復，不小心點到全屏不知如何退出。應該來說，這個熟悉操作是貫穿了始終。
閱讀文檔
然后我開始閱讀vue文檔，試圖弄懂這個框架在干嘛。事實證明，如果是其他框架轉vue可能閱讀文檔是很好的入門方式，但是對于沒有框架經驗的入門者不建議這么做，因為之前還處于很粗淺的階段，對于前端工程化和一個項目的搭建并沒有具體認識，腦海里無法對vue的構建思想形成映射。我的建議是采取方方老師的“copy-run-modify”大法，抄-運行-修改，先將文檔里和其他方式找到的入門demo直接copy，然后去嘗試著修改一些你弄不明白的地方，看看頁面發生了什么改變，去閱讀報錯，這樣會有更加直接的認識。
語法起步
我放棄了閱讀vue文檔，直接去技術社區找前人學習vue的總結，去了解vue基本思想“組件化””JSX語法“”單向數據流“”漸進式“，這時候我還沒有具體應用過這些特性，但是沒關系我們可以找教程。出于不能一次學習太多的考慮，第一個demo我并沒有采用腳手架，而是從webpack官網按照起步給的路徑去一個個創建，這樣我們要修改的就只有app.js和page.html兩個文件，非常直觀，此時通過跟著文檔示例和教程練習去感受每個指令和實例事件到底是怎么運作，尤其是v-model v-if v-for這些相當常用的。然后我們試著開寫，搭了個最基本的架子，然后用vue語法寫出來了todolist的基本功能-新增、刪除、在”已完成-未完成“之間切換。
有了增刪那就要有數據存儲，但是這個涉及到后端，因此我去學習了localstorage的存儲方式，先將數據存儲到瀏覽器。
數據存儲
數據不可能始終放在本地，我注意到公司技術棧是采用axion插件最終是要和ERP系統對接，出于學習成本的考慮，我先選擇了云服務，在這里我用的是leanclound，因為他們家的文檔非常完善。在文檔幫助下，我完善了注冊、登入、登出等功能，對判斷用戶權限、更新存儲、加載等業務邏輯有了基本認識，基本弄明白了整個前后端交互流程。
失敗嘗試
此時我已經初步學習了vue語法和前后端交互流程，我開始入門vue全家桶。一開始我還是看文檔，但是沒有項目經驗，我無法理解vue-router、vuex到底在干嘛。這時候我去找了個簡歷編輯器的教程，想從第一次commit看起，去試圖弄明白一個項目是如何從零搭建的。實際上我選錯了項目，這個項目有八九個組件，commit實在太多，最后我跟著教程也沒有完成效果，但是也學到了一些東西，對于如何用一個個組件像搭積木一樣搭起整個項目有了直觀感受，并且學習到了vuex是如何管理數據進行操作的，并且又多明白了一些業務邏輯。
閱讀源碼
此刻我仍然不太明白vue全家桶是如何進行運作的，因此我去git上clone了一個非?；A的入門項目vue2-happyfri,希望通過閱讀源碼來學習，事實證明這種方式是行之有效的。之前我已經看文章學習了腳手架搭建項目里的每個文件都在干嘛，因此我從main.js出發去一行行了解項目的運行方式，為什么我們要import這些東西，路由是如何指定路徑的跳轉，實例化vue后每一行都代表了什么，然后逐漸發散開來。為了理解import，我去了解AMD、CMD等規范，這個ajax請求用的是基于promise的axion,那我又去學習promise是個什么東西，這個store文件夾里為什么會有四個文件，每一個文件里都放了些什么，通過這種發散式的學習，我碰到了不認識的代碼就去查，最后終于弄懂了vue全家桶的運行方式。
正式開寫
可算是到了正式開寫的部分，此刻我已經對組件化的思想有所認識，我初步設計了頂欄、側邊欄、總時間、任務列表、創建任務幾個組件，vuex里放的全局數據有兩個：總時間和計劃列表。除此之外，還寫了個404頁和彩蛋頁面來加深自己對于路由的理解和element-ui的認識。axion不能vue.use（），我就按照前人經驗把它綁定在vue的原型鏈上，回調函數里無法訪問this那我們就用箭頭函數來綁定，template標簽內不能有兩個同級的div或者element頂級標簽，那我們就先用一個div包裹起來，data里直接寫屬性會警告那么可以用一個return來包裹，store里actions.js和mutation分別都在干嘛到底是一個什么樣的流程，生命周期是怎么一回事鉤子函數又該用哪個，export內容可以為空但是必須暴露出一個接口，甚至于一開始我不小心開啟了eslint檢測語法以至于根本寫不下去步步報錯，這些都是我踩過的坑。
關于axios
這也算是我沒有完成的一部分，因為github找到的學習demo都只涉及到了”增刪改查“里面的”查“，但是todolist四個都會涉及，所以不能mock數據，要么有實際可用的接口要么使用MongDB來操作數據庫，但是對于學習數據庫的時間成本我無法預料，因此涉及到ajax部分我只能按照文檔來寫出js語句但是并不能發出實際請求，幸而之前在學習使用leanclound來存儲讀取數據時我也算是對前后端交互有所了解，計劃將之前用jquery語法和新浪接口寫的新聞瀑布流加載用axios在寫一次以加深理解。
下一步打算
因為深感自己對于前端工程化的理解還是太過粗淺，對于項目的實際搭建也沒有什么經驗，因此我周五拖了不少github上高star的vue入門項目想先學習一下，如 仿餓了么 仿知乎日報 仿網易云音樂 仿conde社區等，了解一下他們的搭建方式。之前曾經試圖閱讀過erp系統的源碼，自以為基本弄懂了其實根本沒有，希望用兩三天時間來大量閱讀代碼來完成第一階段準備進入下一階段。
一句話總結學到了什么
webpack:管理依賴保持結構清晰。
vue:像搭積木一樣做項目。
vue-cli：幫你直接上手，避免在配置中發瘋，從入門到放棄。
vuex：管理全局數據，避免組件直接操作，index.js引入和定義，actions.js提交，mutations.js具體實現。
vue-router：定義路徑和渲染區域，跳轉來跳轉去。
axios:基于promise，更直接的ajax請求數據。
element-ui:統一風格的封裝常用插件，遠離具體實現只管調用。
sass:讓CSS不再繁瑣，且變得有點像js。
個人向經驗
- 上來不要直接閱讀文檔，先看看前人總結。
- 文檔里的示范一定要全跑一次，然后跟著詳細教程做個小項目。
- “copy-run-modify”大法是入門階段最直觀的學習方式。初步入門后可以找開源項目源碼看看，有個整體認識。
- 不要試圖一次性把所有技術棧都用了，一個個來，也不要以為有了教程就可以上手復雜一些的項目。
- 習慣了自己悶頭學，還是太缺乏交流，有時候會被一個報錯卡很久。
- 不要試圖通過看文章來搭建完整的知識系統，直接上手做。然后你會不斷地碰到自己不了解的知識點，這時候再去查（我連三元運算符都不知道……）。
- 多敲代碼，多敲代碼，多敲代碼。敲代碼也會有肌肉記憶。
我的codingID:madluto1994,里面有相關的三個項目： vue+leanclound的第一版todolist，照著教程敲還是失敗了的簡歷編輯器resmuer，采用公司技術棧的todolist。
