<br> var app = new Vue({<br> el: '#app',<br> data: {<br> message: 'Hello Vue!'<br> }<br> })<br>
而ECMAScript6就是新一代的JavaScript語言。
這裡也強烈推薦大家學習ECMAScript6的時候參考這本書ECMAScript 6入門
11.我在學習Vue.js的時候老是聽到Webpack，這是啥？
Webpack是一個前端打包和構建工具。如果你之前一直是手寫HTML，CSS，JavaScript，並且通過link標籤將CSS引入你的HTML文件，以及通過Script標籤的src屬性引入外部的JS腳本，那麼你肯定會對這個工具感到陌生。不要緊，我們先來了解一下為什麼要用Webpack，然後帶著原因去學習就好了。
12.為什麼要用Webpack
前面說了，做一個單頁應用程序本身就相當複雜，而且在做的時候肯定會使用到很多素材和別的第三方庫，我們該如何去管理這些東西呢？
還有前面講到了Webpack是一個前端打包工具，前端代碼為什麼要打包呢？因為單頁應用程序中用到很多素材，如果每一個素材都通過在HTML中以src屬性或者link來引入，那麼請求一個頁面的時候，可能瀏覽器就要發起十多次請求，往往請求的這些資源都是一些腳本代碼或者很小的圖片，這些資源本身才幾k，下載連1秒都不需要，但是由於HTTP是應用層協議，它的下層是TCP這個運輸層協議，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長，所以需要把這些小文件全部打包成一個文件，這樣只要一次TCP握手和揮手的過程，就把多個資源給下載下來了，並且多個資源由於都是共享一個HTTP請求，所以head等部分也是共享的，相當於形成了規模效應，讓網頁展現更快，用戶體驗更好。
前面說到Webpack還有構建的功能，這就不得不提到了ECMAScript6這個新版本的JavaScript，但是現在國內外還有很多人用著老版本的瀏覽器，這些瀏覽器並不支持ECMAScript6，那麼我們的前端項目如何在這種瀏覽器上運行呢？這就需要Webpack的Loader自動載入一個轉換器來將我們寫的ECMAScript6轉換成瀏覽器能支持的老版本JavaScript語言，這個轉換器的名字叫做babel，如果你以後聽到或者看到了這個單詞，應該要知道它就是一個ECMAScript6 to 老版本JavaScript的轉換器了。這也是Webpack的構建功能。當然對前端有更深入的同學還會知道Sass，Less，stylus之類的CSS預處理器，我們也可以通過在Loader中編寫特定的規則來實現自動將這些CSS預處理語言轉換成普通瀏覽器能識別的CSS代碼。
開頭的介紹提到了vue.js可以使用單文件組件開發項目，其實也是通過Webpack將單文件組件中的模版，樣式以及JS轉換到主頁面中
當然Webpack不止這點功能，它還可以通過安裝各種插件來擴展，比如說熱加載技術，就是解放鍵盤的F5鍵。讓我們修改代碼，並且按Ctrl+S保存之後，瀏覽器頁面自動刷新變化，不需要我們去手動刷新，還有一些插件可以自動添加註釋，自動給CSS代碼加上一些瀏覽器內核對CSS3兼容前綴，就像webkit-xxx之類的一樣。
13.NPM和Node.js又是什麼？它們是什麼關係？
首先講講Node.js。我們知道通常情況下，JavaScript的運行環境都是瀏覽器，因此JavaScript的能力也就侷限於瀏覽器能賦予它的權限了。比如說讀寫本地系統文件這種操作，一般情況下運行在瀏覽器中的JavaScript代碼是沒有這個操作權限的。如果我們想用JavaScript寫出一些能夠運行在操作系統上的，能夠具有像PHP，JAVA之類的編程語言具有的功能的程序該怎麼辦呢？Node.js就解決了這個問題。Node.js是一個服務端的JavaScript運行環境，通過Node.js可以實現用JavaScript寫獨立程序。像我們之前提到的Webpack就是Node.js寫的，所以作為一個前端開發，即使你不用Node.js寫獨立程序，也得配一個Node.js運行環境，畢竟很多前端工具都是使用它寫的。
NPM是一個node.js的包管理器。我們在傳統開發的時候，JQuery.js大多都是百度搜索，然後去官網下載，或者直接引入CDN資源，這種方法太過於麻煩。如果以後遇到其他的包，這個包的代碼本身可能還調用了其他的包（也稱這個包和其他的那幾個包存在依賴關係），那麼我們要在自己的項目中引入一個包將變得十分困難。現在我們有了NPM這個包管理器，直接可以通過
npm install xxx包名稱
的方式引入它，比如說
npm install vue
就自動在當前項目文件夾下導入了這個包，並且npm自動下載好了vue這個包依賴的其他包。
至於有的人在按照網上的npm教程配置的時候踩坑了，發現下載速度很慢或者完全下載不了，那是因為我國有著眾所周知的原因，網上也有各種解決方法可以解決這個問題，大家多善用搜索引擎。
前面提到了Webpack可以安裝各種插件來擴展功能，其實也是通過這種方式擴展。
如果你學過PHP的話，NPM就和PHP裡面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。
14.Vue-CLi又是啥？
它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄，配置好Webpack，以及各種依賴包的工具，它可以通過
npm install vue-cli -g
的方式安裝，後面的-g表示全局安裝的意思，意味著你可以打開命令行之後直接通過vue命令調用它。
15.我該不該學Vue.js？
現在Vue.js無論是發展勢頭還是作者支持還是很好的，而且它本身中文資料就比較多，教程也很多，現在隨隨便便打開幾個和前端開發有關的知乎專欄，基本上都能見到相關文章，社區也很活躍。
至於你該不該學，取決於你自己，如果你當前只是做做以內容展示為主的項目，或者就是成天用各種CMS建站仿站，並且以後都不打算更換更好的工作，那麼可以暫時不用學。如果你開發的項目交互非常多，而且前後端開發都對前後端分離有很清楚的認識，那麼可以大膽的學習，並且在實際項目中運用。
16.Vue.js怎麼火起來的？
關於這個問題，網上說法很多，我自己認為主要還是前些年大前端變革太快，而最近一年開始Vue.js+Webpack這個組合開始逐漸穩定下來了，而且已經有了很多中文資料。
對比它的競爭對手AngularJS，新舊版本項目無法平滑升級，變革太大讓用戶感覺不安穩。
而React本身主流推薦用的是JSX，需要額外學習一門語法（什麼？學Vue.js還要學ECMAScript6？現在ECMAScript6是趨勢，並不是因為Vue.js才要學的），並且React本身用的是render寫法編寫模版代碼，這讓很多用習慣了Smarty等後端模版引擎得人來使用感覺很不適應，現在看來React本身在中國一些論壇社區的火爆程度還是沒有Vue.js高。
當然也並不是說除了Vue.js以外其他框架都很差。像知乎新版也是用React開發的，他還是有各自優秀的地方大家可以深入學習之後做出自己的判斷。
17.我在很多地方還看到Vuex和Vue-route，它們又是什麼？
Vuex是vue的一個狀態管理器。用於集中管理一個單頁應用程序中的各種狀態。
Vue-route是vue的一個前端路由器，這個路由器不是我們上網用的路由器，而是一個管理請求入口和頁面映射關係的東西。它可以實現對頁面局部進行無刷新的替換，讓用戶感覺就像切換到了網頁一樣。
要講清楚這兩個東西，又得花費大量篇幅，所以這裡只是簡單提一下，先學好vue.js本身才是最重要的。
18.我還在一些地方看到過Vue-resource和Axios，它們又是什麼？
我們在傳統的前後端不分離的開發中，後端直接把數據通過模版引擎拼接進了返回的HTML中。而現在做單頁應用程序屬於前後端分離開發，那麼這個單頁應用程序中的數據就得通過ajax的方式獲取，也要通過ajax的方式提交到後端。
在傳統開發中我們都是通過xmlhttprequest手動操作，或者通過JQuery的ajax方法來進行數據提交獲取。
vue.js本身沒有封裝ajax操作庫，所以我們要通過Vue-resource和Axios來進行ajax操作，而因為種種原因，現在vue.js2.0已經將axios作為官方推薦的ajax庫了。
19.寫Vue.js用什麼開發工具和電腦呢？
前端開發基本上不需要太高端的電腦都能勝任，現在這個時代是臺電腦，裝個編輯器都可以做前端開發的。
Vue.js的組件文件本質上還是普通的代碼文件，所以各種編輯器配合一些語法檢查插件就足夠了。我自己用的是sublime text 3，安裝一些插件之後可以實現.vue單文件組件高亮代碼以及各種自動完成。Webstorm中也有類似插件，大家可以在網上各種教學文章的指導下配置好環境。
我用的主題是Monokai，這個主題在大部分顯示器下長時間觀看眼睛不會很疼。我使用的顯示器是LG IPS236，部分顯示器有亮度色標調節，我這款顯示器調到2.0左右會比較舒適，過低會導致底部的茶色背景變黑，反差較大更加疲勞，過高會導致對比度不足，畫面泛白影響調色。
閱讀更多 前端嫣然呀呀呀 的文章
關鍵字: jQuery 編程語言 JavaScript
