前端是一個大坑，因為它入門簡單，而越往后越難。越往后學的東西就越多，我現(xiàn)在可能已經(jīng)意識到了：東西是學不完的。所以我選擇回歸到它的本質，從基礎學起。
上一篇我也不知道瞎扯了一些什么東西，這篇繼續(xù)瞎扯。
學習要先看到最后的效果
我有一個怪癖，看書喜歡從后往前看?？赡芪沂且粋€急躁的人，不喜歡前面的拖拖拉拉，沒玩沒了的細節(jié)。學習一個新知識，我就想知道最后的效果，然后再決定是否要回過頭來看細節(jié)。其實我學習Vue或React的時候，我JavaScript都還沒搞明白，所以現(xiàn)在也是邊接觸新的東西，邊補JavaScript基礎。
說的這里，我覺得也先貼上我的項目的效果圖吧。
登錄效果
注銷效果
聊天效果
這張圖有點大，貌似經(jīng)常加載失敗。
簡單的說明一下
我確實是一個比較懶的人，同時我又是一個急躁的人，所以等不及去找應用里的那些圖標，想先把效果給做出來，后期可能會補上也可能不會補。
登錄和注銷可能是個假的，后臺不會有任何動作；好吧，聊天可能也是個假的，因為對方可能是個機器人。
沒有很炫的效果，也沒有很復雜的功能，但該用上的知識幾乎都用上了，所以我說這對于初學者還是很有幫助的。首先，有vue-router來實現(xiàn)前端路由，有vuex來管理數(shù)據(jù)流動，還有vue的過渡動畫，有自定義指令directive，有自定義插件，最后還有組件的Slot內容分發(fā)。Vue組件開發(fā)的思想體現(xiàn)的還算到位。
同時，也可以參考我的另一個完整的項目，尤其是在vuex的使用上更具有參考性。
碼字不易，如果你覺得對你有幫助，到GitHub上幫忙star一下，在此先行謝過了。
不聊技術，只談體會
如果要談技術，對于初學者我想沒有什么比官方文檔更好的了，最主要的是它是純中文啊。當然，以后有時間我會另外寫幾篇文章，專門分享前端技術方面的知識。
我最開始看到Vue這個詞的時候，大約是在去年11月份左右吧，那篇文章主要就是說前端需要學習的東西。在那篇文章中，也看到了像Babel、Jade、Sass、Less、TypeScript、CoffeeScript、Node.js、webpack等一大堆聞所未聞的新詞，這對于只懂HTML+CSS+JS的我瞬間懵逼了?？赡芤彩菑哪菚r候起，我才算正式的入了前端這個大坑吧。
Vue與React
對于我這個嚴重患有選擇困難癥的人來說，Vue與React之間也是糾結了許久。其實我是先學React的，主要是因為它出自著名的Facebook之手，所以潛意識下就覺得它更牛逼一些?？墒?code>React基本上都是英文資料，看起來實在費勁，當時也是花了很多功夫才勉強的寫了一個小項目。后面由React又引出了Flux和Redux，最受不了的是全部都是英文文檔。堅持了一段時間之后，急躁的心有些耐不住性子了，于是就果斷放棄轉學Vue了。
真正學Vue就是從今年3月開始的，我不喜歡一點一點的看文檔，而是直接上手項目。對我來說，我覺得學習的最好方式就是實踐。其實當時也是踩過很多坑，大多數(shù)都是環(huán)境配置上面的，所以我上篇就建議初學者直接使用官方提供的vue-cli工具。
Vue是一種新的思想
如果初次接觸這種MVVM的框架，我覺得最重要的就是要理解它的思想，這樣學起來才不會很吃力。由于之前學過一段時間的React，所以對于Vue的很多知識感覺也是理所當然。其實無論什么框架，很多東西都是相通的，還是那句話，最重要的是思想。
大致的理解：一個界面由很多的模塊（組件）構成，組件也就相當于HTML中的一個標簽，只不過這個標簽的我們自己定義的。所以它（組件）同樣具有標簽的功能，也就是屬性和事件。屬性是用來傳遞參數(shù)的，將外部的值傳入到組件的內部，然后在組件內部拿到這個值做一些事情。組件是我們自己定義的，就可以完全控制它的樣式和狀態(tài)，還有它的行為（事件）。所以一個組件就可以這樣使用：
<!-- my-component 就是一個自定義的組件-->
<my-component value="Hello World!" @myclick="alert('hello')"></my-component>
<!-- 傳遞一個value參數(shù)進去，監(jiān)聽一個myclick事件 -->
對于使用者來說，我們不關心一個組件的內部是如何實現(xiàn)的，我們只關心它實現(xiàn)的功能。就像我們使用原生的input標簽一樣，作為一個按鈕的時候我們只需要傳遞一個值進去，然后監(jiān)聽它的點擊事件就好了。至于它內部做了些什么，完全不關我們的事。
有一點面向對象的感覺，要干什么，就new一個對象，通過對象去做，至于這個對象是怎么做到的，我們不關心?？墒牵@個對象需要我們自己來定義。同樣的，Vue中的組件也需要我們自己定義，一旦定義好了，只管拿來用。
別問太多為什么
我想大多數(shù)初學者跟我一樣，都有一個疑問：我們將自定義的組件直接當做標簽一樣寫在HTML文檔中，Vue是怎么做到的？我也很奇怪，但我不會去深究，至少現(xiàn)在這個階段不會。但我知道，其實在真實的瀏覽器中，我們寫在HTML文檔中的組件標簽已經(jīng)按照我們定義的結構替換成了原生的標簽。也就是說，在真實的HTML文檔中，還是原生的那些標簽，只不過Vue通過內部的某種機制將我們寫的虛擬標簽反應在了真實的HTML文檔中。當我們需要更新內容的時候，我們只能改變我們自己定義的虛擬文檔結構，然后Vue檢測到變化之后，就會將改變的部分通過某種機制重新反應到真實的HTML文檔中。
這些是我的一些理解，至于更深的理解，我想我現(xiàn)在應該沒那工夫去研究了。對于一個框架，我們拿來用就好了，過于深究其原理實在太累太累。有時候，我們應該學會站在巨人的肩膀上做開發(fā)。如果非要問個為什么，我想我可以一直追問到二進制、高低電平、電子電荷的起源……媽呀，太可怕了！
習慣命令行
對于前端開發(fā)者來說，當接觸到node.js之后，可能很多時候就不得不使用命令行了，因為很多工具、插件、框架都是基于node.js的。對于剛接觸的人可能不理解，命令行真的很強大，別問為什么，一定要習慣它并且學會一些基本的操作。
記得最開始在學校的時候，老師是叫我們用Dreamweaver來托拉拽一個網(wǎng)頁。后來剛出來工作的時候，我的工具是Webstorm（好像只有學校的老師才用Dreamweaver這玩意兒吧）。那時候都是典型的css+js目錄，index.html寫在根目錄?，F(xiàn)在，我的工具是Sublime+命令行。在這里，我要推薦一款Windows下比較好用的命令行工具——Git for Windows。
對于習慣Linux和MacOS的人來說，Windows下的命令行工具實在惡心至極。而這款工具，不僅自帶了git，而且也支持一些常用的命令，比如cd，rm，ls等，讓命令行用起來更像命令行。如果你在node.js環(huán)境下開發(fā)項目，那么我強烈推薦這款工具。
說到這里，我也強烈建議使用git來進行項目的版本控制，因為它可以讓你有反悔的機會。我之前因為手賤不小心用了rm -rf src/這條命令（本來是想刪其他目錄的），回車的一瞬間，我的內心是崩潰的（經(jīng)歷過的人才會懂）。src/是源文件目錄，也就是說前面寫的所有代碼全都白費了，而且我的項目當時還沒有托管到遠程的GitHub上，也沒有任何備份。萬幸的是我之前用了git版本控制工具，一條命令src/目錄原模原樣的又回來了。當然，git的用處遠不止如此。
后記
又胡扯了一篇，不管你喜不喜歡，都希望你喜歡一下，你的支持是我堅持的動力?，F(xiàn)在技術類文章網(wǎng)上一搜也是一大堆，所以我覺得寫一些個人經(jīng)歷和心得體會，可能對初學者更有幫助。
后面也會寫一些純技術性的文章，把自己遇到的難題和踩過的坑全部整理出來，盡量讓初學者少走一些彎路。
