Vue.js入門指南

最近在逛各大網(wǎng)站砸西，論壇绞蹦，以及像SegmentFault等編程問答社區(qū)力奋，發(fā)現(xiàn)Vue.js異常火爆幽七，重復(fù)性的提問和內(nèi)容也很多景殷，樓主自己也趁著這個大前端的熱潮，著手學(xué)習(xí)了一段時間的Vue.js澡屡，目前用它正在做自己的結(jié)業(yè)項目猿挚。

在做的過程中也對Vue.js的官方文檔以及其各種特性有了許多認(rèn)識。作為一個之前以PHP+模版引擎為主的開發(fā)驶鹉，從一個從未接觸過除HTML+CSS+JavaScript+JQuery以外的前端技術(shù)的人到現(xiàn)在可以獨立使用Vue.js以及各種附屬的UI庫來開發(fā)項目绩蜻，我總結(jié)了一些知識和經(jīng)驗想與大家分享。

下面我就以問答的形式來分享吧室埋。這里假設(shè)你僅僅只掌握了HTML+CSS+JavaScript办绝，如果你對JQuery這個前端庫伊约，以及各種后端模版語言比如說PHP，JSP還有所了解并且使用過的話那就太好了孕蝉。
1.Vue.js是什么盗扇？

Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進式框架斯议。與其他重量級框架不同的是穿剖，Vue 采用自底向上增量開發(fā)的設(shè)計哲思。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)佳鳖，非常容易與其它庫或已有項目整合霍殴。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用系吩。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件来庭。

如果你是有經(jīng)驗的前端開發(fā)者，想知道 Vue.js 與其它庫/框架的區(qū)別穿挨，查看對比其它框架巾腕。

這是官網(wǎng)的介紹，是不是覺得非常的抽象非常的官方絮蒿？看完之后可能還是有很多人不是很懂這個框架到底是用來做什么的尊搬，什么是“漸進式框架”？什么是“自底向上增量開發(fā)”土涝？什么是“視圖層”佛寿？什么是“單文件組件”？什么是“復(fù)雜的單頁應(yīng)用但壮？”第二段話里面“響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件”這又是個啥冀泻？還有最后一段話，“Vue.js 與其它庫/框架的區(qū)別”究竟是什么蜡饵？

不要擔(dān)心弹渔，如果你慢慢看完這里面的所有問答，一定會對前面那些可能你從未聽說過的專業(yè)術(shù)語有一種恍然大悟的感覺溯祸。
2.Vue.js到底是什么肢专？

想必現(xiàn)在能看到我這篇文章的人，都是用著APP或者網(wǎng)頁版知乎在閱讀把焦辅。Vue.js就是一個用于搭建類似于網(wǎng)頁版知乎這種表單項繁多博杖，且內(nèi)容需要根據(jù)用戶的操作進行修改的網(wǎng)頁版應(yīng)用。
3.單頁應(yīng)用程序（SPA）

顧名思義筷登，單頁應(yīng)用一般指的就是一個頁面就是應(yīng)用剃根，當(dāng)然也可以是一個子應(yīng)用，比如說知乎的一個頁面就可以視為一個子應(yīng)用前方。單頁應(yīng)用程序中一般交互處理非常多狈醉，而且頁面中的內(nèi)容需要根據(jù)用戶的操作動態(tài)變化廉油。
4.你前面說的網(wǎng)頁版知乎我也可以用JQuery寫啊，為什么要用Vue.js呢苗傅？

講到JQuery娱两，就不得不說到JavaScript的DOM操作了。如果你用JQuery來開發(fā)一個知乎金吗，那么你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結(jié)構(gòu)了。

現(xiàn)在我們把一個網(wǎng)頁應(yīng)用抽象一下趣竣，那么HTML中的DOM其實就是視圖摇庙，一個網(wǎng)頁就是通過DOM的組合與嵌套，形成了最基本的視圖結(jié)構(gòu)遥缕，再通過CSS的修飾卫袒，在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來更加美觀。最后涉及到交互部分单匣，就需要用到JavaScript來接受用戶的交互請求夕凝，并且通過事件機制來響應(yīng)用戶的交互操作，并且在事件的處理函數(shù)中進行各種數(shù)據(jù)的修改户秤，比如說修改某個DOM中的innerHTML或者innerText部分码秉。

我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次，這個層次就叫做視圖層鸡号。

Vue 的核心庫只關(guān)注視圖層

我們?yōu)槭裁匆岩晥D層抽取出來并且單獨去關(guān)注它呢转砖？

因為在像知乎這種頁面元素非常多，結(jié)構(gòu)很龐大的網(wǎng)頁中鲸伴，數(shù)據(jù)和視圖如果全部混雜在一起府蔗，像傳統(tǒng)開發(fā)一樣全部混合在HTML中，那么要對它們進行處理會十分的費勁汞窗，并且如果其中有幾個結(jié)構(gòu)之間存在藕斷絲連的關(guān)系姓赤，那么會導(dǎo)致代碼上出現(xiàn)更大的問題，這什么問題呢仲吏？

你是否還記得你當(dāng)初寫JQuery的時候不铆，有寫過$('#xxx').parent().parent().parent()這種代碼呢？當(dāng)你第一次寫的時候裹唆，你覺得頁面元素不多狂男，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在注釋里面寫清楚這個元素的爸爸的爸爸的爸爸不就好了品腹。但是萬一過幾天之后你的項目組長或者你的產(chǎn)品經(jīng)理突然對你做的網(wǎng)頁提出修改要求岖食，這個修改要求將會影響頁面的結(jié)構(gòu)，也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變舞吭，那么$('#xxx').parent().parent().parent()可能就會變成$('#xxx').parent().parent().parent().parent().parent()了泡垃。

這還不算什么析珊，等以后產(chǎn)品迭代越來越快，修改越來越多蔑穴，而且頁面中類似的關(guān)聯(lián)和嵌套DOM元素不止一個忠寻，那么修改起來將非常費勁。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的存和，可能到時候打開這個頁面奕剃，會變得越來越卡，而你卻無從下手捐腿。

當(dāng)你在編寫項目的時候遇到了這種問題纵朋，你一定會抱怨，為什么世上會有HTML這種像盜夢空間一樣的需要無數(shù)div嵌套才能做出頁面的語言茄袖，為什么當(dāng)初學(xué)JQuery看中的是它簡潔的DOM操作操软，現(xiàn)在卻一點也不覺得它有多簡潔，難道我學(xué)的是假的JQuery宪祥？為什么寫個代碼這么難聂薪，你想砸電腦，你想一鍵盤拍在產(chǎn)品狗的腦袋上蝗羊，責(zé)怪他天天改需求才讓你原本花清香茶清味的代碼變得如此又臭又長藏澳。

這個時候如果你學(xué)過Vue.js，那么這些抱怨將不復(fù)存在耀找。
5.Vue.js為什么能讓基于網(wǎng)頁的前端應(yīng)用程序開發(fā)起來這么方便笆载？

因為Vue.js有聲明式，響應(yīng)式的數(shù)據(jù)綁定涯呻，與組件化的開發(fā)凉驻，并且還使用了Virtual DOM這個看名字就覺得高大上的技術(shù)。

可是這些名詞都是啥复罐？
6.響應(yīng)式的數(shù)據(jù)綁定

這里的響應(yīng)式不是@media 媒體查詢中的響應(yīng)式布局涝登，而是指vue.js會自動對頁面中某些數(shù)據(jù)的變化做出響應(yīng)。至于是如何響應(yīng)的效诅，大家可以先把下面這段代碼隨便粘貼到一個擴展名為html的文件然后用瀏覽器打開胀滚，隨便在文本框里面輸入一些文字，觀察一下頁面變化乱投。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js測試 - 代碼之美專欄</title>
    <!-- author:昌維 代碼之美 https://zhuanlan.zhihu.com/codes -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="" value="" placeholder="在這里輸入文字咽笼，下面會跟著變化" v-model="message">
        <hr>
        <p>{{ message }}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
    </script>
</body>
</html>

是不是會發(fā)現(xiàn)一個很神奇的現(xiàn)象，文本框里面輸入的文字和后面的p標(biāo)簽中的內(nèi)容一起變化戚炫？

換句話說剑刑，p標(biāo)簽里面通過{{ message }}這個寫法與input標(biāo)簽中的value綁定在了一起，其中變化，另外一個和它綁定的數(shù)據(jù)就跟著變化施掏。

結(jié)合標(biāo)題來說钮惠，就是vue.js會自動響應(yīng)數(shù)據(jù)的變化情況，并且根據(jù)用戶在代碼中預(yù)先寫好的綁定關(guān)系七芭，對所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進行修改素挽。而這種綁定關(guān)系，在圖上是以input 標(biāo)簽的v-model屬性來聲明的狸驳，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎预明。
7.組件化開發(fā)

還記得在傳統(tǒng)前端開發(fā)的時候，我們都是每個人做一個頁面耙箍，然后最后套入各種后端模版引擎撰糠，比如說PHP的Smarty或者Java的JSP等等。

但是現(xiàn)在我們做單頁應(yīng)用究西，頁面交互和結(jié)構(gòu)十分復(fù)雜，一個頁面上就有許許多多的模塊需要編寫物喷，而且往往一個模塊的代碼量和工作量就非常龐大卤材，如果還按照原先的方法來開發(fā)，那么會累死人峦失。而且遇到以后的產(chǎn)品需求變更扇丛，修改起來也非常麻煩，生怕動了其中一個div之后尉辑，其他div跟著雪崩帆精，整個頁面全部亂套，或者由于JavaScript的事件冒泡機制隧魄，導(dǎo)致修改一些內(nèi)層的DOM事件處理函數(shù)之后卓练，出現(xiàn)各種莫名其妙的詭異BUG。

在面向?qū)ο缶幊讨泄鹤模覀兛梢允褂妹嫦驅(qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個大的業(yè)務(wù)模塊拆分成更多更小的幾個類襟企。在面向過程編程中，我們也可以把一些大功能拆分成許多函數(shù)狮含，然后分配給不同的人來開發(fā)顽悼。

在前端應(yīng)用，我們是否也可以像編程一樣把模塊封裝呢几迄？這就引入了組件化開發(fā)的思想蔚龙。

Vue.js通過組件，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中映胁，我們只要先在父級應(yīng)用中寫好各種組件標(biāo)簽（占坑）木羹，并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性）解孙，然后再分別寫好各種組件的實現(xiàn)（填坑）汇跨，然后整個應(yīng)用就算做完了务荆。
8.Virtual DOM

現(xiàn)在的網(wǎng)速越來越快了，很多人家里都是幾十甚至上百M的光纖穷遂，手機也是4G起步了函匕，按道理一個網(wǎng)頁才幾百K，而且瀏覽器本身還會緩存很多資源文件蚪黑，那么幾十M的光纖為什么打開一個之前已經(jīng)打開過盅惜，已經(jīng)有緩存的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有性能瓶頸的忌穿，尤其是在傳統(tǒng)開發(fā)中抒寂，用JQuery或者原生的JavaScript DOM操作函數(shù)對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹掠剑，導(dǎo)致頁面看起來非城撸卡頓。

而Virtual DOM則是虛擬DOM的英文朴译，簡單來說井佑，他就是一種可以預(yù)先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化眠寿，由于這個DOM操作屬于預(yù)處理操作躬翁，并沒有真實的操作DOM，所以叫做虛擬DOM盯拱。最后在計算完畢才真正將DOM操作提交盒发，將DOM操作變化反映到DOM樹上。

對于vue.js的Virtual DOM狡逢，目前業(yè)界有著褒貶不一的評價宁舰。有人認(rèn)為Vue.js作為一個輕量級框架，引入Virtual DOM會加大Vue.js本身的代碼尺寸奢浑，也會消耗更多CPU（手機上會更耗電）（注意：消耗更多的CPU并不意味著會更卡明吩，因為JavaScript計算是后臺計算，他的計算量還不至于讓DOM操作變得卡頓）殷费，并且在操作單個DOM元素的時候印荔，反而多了一道計算工序，會更慢详羡。但也有人認(rèn)為基本上會用Vue.js開發(fā)的都是頁面中內(nèi)容很多的元素仍律，肯定操作的DOM量級普遍較大，平均一下還是比較劃算的实柠。
9.我到底該怎么用Vue.js做單頁應(yīng)用開發(fā)水泉？

說了這么多，我還是不知道怎么用它做出一個像知乎那樣的頁面啊，到底怎么學(xué)它呢草则？

前面我們看了一個響應(yīng)式的數(shù)據(jù)綁定案例钢拧，那只是一個DEMO，而且也看不出有什么實際意義炕横，離真正的單頁應(yīng)用程序還差得遠源内，到底怎么用它開發(fā)真實的項目呢？

我的建議是份殿，先把介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍膜钓。除了組件這個小節(jié)涉及到了很多晦澀難懂的名詞以外，前面幾章完全就是把Vue.js當(dāng)作一個模版引擎來用卿嘲。

然后開始學(xué)習(xí)ECMAScript6颂斜，Webpack，NPM以及Vue-Cli的基本用法拾枣，最好對Node.js也要有所了解沃疮。

最后組件部分先大致看一遍，了解組件里面都有哪些概念之后梅肤，開始看網(wǎng)上各種實戰(zhàn)視頻以及文章還有別人開源的源代碼司蔬。
10.在前面你提到過好幾次ECMAScript，這是啥凭语？

ECMAScript聽名字好像和JavaScript很像葱她，難不成他們有什么千絲萬縷的聯(lián)系撩扒？

沒錯你猜對了似扔，他們之間還真有著很深的聯(lián)系。

引用阮一峰老師的話：（ECMAScript 6入門）

要講清楚這個問題搓谆，需要回顧歷史炒辉。1996年11月，JavaScript 的創(chuàng)造者 Netscape 公司泉手，決定將 JavaScript 提交給國際標(biāo)準(zhǔn)化組織ECMA黔寇，希望這種語言能夠成為國際標(biāo)準(zhǔn)。次年斩萌，ECMA 發(fā)布262號標(biāo)準(zhǔn)文件（ECMA-262）的第一版缝裤，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)，并將這種語言稱為 ECMAScript颊郎，這個版本就是1.0版憋飞。

該標(biāo)準(zhǔn)從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript姆吭，有兩個原因榛做。一是商標(biāo)，Java 是 Sun 公司的商標(biāo)，根據(jù)授權(quán)協(xié)議检眯，只有 Netscape 公司可以合法地使用 JavaScript 這個名字厘擂，且 JavaScript 本身也已經(jīng)被 Netscape 公司注冊為商標(biāo)。二是想體現(xiàn)這門語言的制定者是 ECMA锰瘸，不是 Netscape刽严，這樣有利于保證這門語言的開放性和中立性。

因此获茬，ECMAScript 和 JavaScript 的關(guān)系是港庄，前者是后者的規(guī)格，后者是前者的一種實現(xiàn)（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）恕曲。日常場合鹏氧，這兩個詞是可以互換的。

而ECMAScript6就是新一代的JavaScript語言佩谣。

這里也強烈推薦大家學(xué)習(xí)ECMAScript6的時候參考這本書ECMAScript 6入門
11.我在學(xué)習(xí)Vue.js的時候老是聽到Webpack把还，這是啥？

Webpack是一個前端打包和構(gòu)建工具茸俭。如果你之前一直是手寫HTML吊履，CSS，JavaScript调鬓，并且通過link標(biāo)簽將CSS引入你的HTML文件艇炎，以及通過Script標(biāo)簽的src屬性引入外部的JS腳本，那么你肯定會對這個工具感到陌生腾窝。不要緊缀踪，我們先來了解一下為什么要用Webpack，然后帶著原因去學(xué)習(xí)就好了虹脯。
12.為什么要用Webpack

前面說了驴娃，做一個單頁應(yīng)用程序本身就相當(dāng)復(fù)雜，而且在做的時候肯定會使用到很多素材和別的第三方庫循集，我們該如何去管理這些東西呢唇敞？

還有前面講到了Webpack是一個前端打包工具，前端代碼為什么要打包呢咒彤？因為單頁應(yīng)用程序中用到很多素材疆柔，如果每一個素材都通過在HTML中以src屬性或者link來引入，那么請求一個頁面的時候镶柱，可能瀏覽器就要發(fā)起十多次請求旷档，往往請求的這些資源都是一些腳本代碼或者很小的圖片，這些資源本身才幾k奸例，下載連1秒都不需要彬犯，但是由于HTTP是應(yīng)用層協(xié)議向楼，它的下層是TCP這個運輸層協(xié)議，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長谐区，所以需要把這些小文件全部打包成一個文件湖蜕，這樣只要一次TCP握手和揮手的過程，就把多個資源給下載下來了宋列，并且多個資源由于都是共享一個HTTP請求昭抒，所以head等部分也是共享的，相當(dāng)于形成了規(guī)模效應(yīng)炼杖，讓網(wǎng)頁展現(xiàn)更快灭返，用戶體驗更好。

前面說到Webpack還有構(gòu)建的功能坤邪，這就不得不提到了ECMAScript6這個新版本的JavaScript熙含，但是現(xiàn)在國內(nèi)外還有很多人用著老版本的瀏覽器，這些瀏覽器并不支持ECMAScript6艇纺，那么我們的前端項目如何在這種瀏覽器上運行呢怎静？這就需要Webpack的Loader自動載入一個轉(zhuǎn)換器來將我們寫的ECMAScript6轉(zhuǎn)換成瀏覽器能支持的老版本JavaScript語言，這個轉(zhuǎn)換器的名字叫做babel黔衡，如果你以后聽到或者看到了這個單詞蚓聘，應(yīng)該要知道它就是一個ECMAScript6 to 老版本JavaScript的轉(zhuǎn)換器了。這也是Webpack的構(gòu)建功能盟劫。當(dāng)然對前端有更深入的同學(xué)還會知道Sass夜牡，Less，stylus之類的CSS預(yù)處理器侣签，我們也可以通過在Loader中編寫特定的規(guī)則來實現(xiàn)自動將這些CSS預(yù)處理語言轉(zhuǎn)換成普通瀏覽器能識別的CSS代碼塘装。

開頭的介紹提到了vue.js可以使用單文件組件開發(fā)項目，其實也是通過Webpack將單文件組件中的模版硝岗，樣式以及JS轉(zhuǎn)換到主頁面中

當(dāng)然Webpack不止這點功能氢哮，它還可以通過安裝各種插件來擴展袋毙，比如說熱加載技術(shù)型檀，就是解放鍵盤的F5鍵。讓我們修改代碼听盖，并且按Ctrl+S保存之后胀溺，瀏覽器頁面自動刷新變化，不需要我們?nèi)ナ謩铀⑿陆钥矗€有一些插件可以自動添加注釋仓坞，自動給CSS代碼加上一些瀏覽器內(nèi)核對CSS3兼容前綴，就像webkit-xxx之類的一樣腰吟。
13.NPM和Node.js又是什么无埃？它們是什么關(guān)系徙瓶？

首先講講Node.js。我們知道通常情況下嫉称，JavaScript的運行環(huán)境都是瀏覽器侦镇，因此JavaScript的能力也就局限于瀏覽器能賦予它的權(quán)限了。比如說讀寫本地系統(tǒng)文件這種操作织阅，一般情況下運行在瀏覽器中的JavaScript代碼是沒有這個操作權(quán)限的壳繁。如果我們想用JavaScript寫出一些能夠運行在操作系統(tǒng)上的，能夠具有像PHP荔棉，JAVA之類的編程語言具有的功能的程序該怎么辦呢闹炉？Node.js就解決了這個問題。Node.js是一個服務(wù)端的JavaScript運行環(huán)境润樱，通過Node.js可以實現(xiàn)用JavaScript寫?yīng)毩⒊绦蛟ァＯ裎覀冎疤岬降腤ebpack就是Node.js寫的，所以作為一個前端開發(fā)壹若，即使你不用Node.js寫?yīng)毩⒊绦蜿枪郏驳门湟粋€Node.js運行環(huán)境，畢竟很多前端工具都是使用它寫的舌稀。

NPM是一個node.js的包管理器啊犬。我們在傳統(tǒng)開發(fā)的時候，JQuery.js大多都是百度搜索壁查，然后去官網(wǎng)下載觉至，或者直接引入CDN資源，這種方法太過于麻煩睡腿。如果以后遇到其他的包语御，這個包的代碼本身可能還調(diào)用了其他的包（也稱這個包和其他的那幾個包存在依賴關(guān)系），那么我們要在自己的項目中引入一個包將變得十分困難∠郑現(xiàn)在我們有了NPM這個包管理器应闯，直接可以通過

npm install xxx包名稱

的方式引入它，比如說

npm install vue

就自動在當(dāng)前項目文件夾下導(dǎo)入了這個包挂捻，并且npm自動下載好了vue這個包依賴的其他包碉纺。

至于有的人在按照網(wǎng)上的npm教程配置的時候踩坑了，發(fā)現(xiàn)下載速度很慢或者完全下載不了刻撒，那是因為我國有著眾所周知的原因骨田，網(wǎng)上也有各種解決方法可以解決這個問題，大家多善用搜索引擎声怔。

前面提到了Webpack可以安裝各種插件來擴展功能态贤，其實也是通過這種方式擴展。

如果你學(xué)過PHP的話醋火，NPM就和PHP里面的Composer差不多悠汽。也和CentOS下的yum和Ubuntu下的apt-get差不多箱吕。
14.Vue-CLi又是啥？

它是一個vue.js的腳手架工具柿冲。說白了就是一個自動幫你生成好項目目錄殖氏，配置好Webpack，以及各種依賴包的工具姻采，它可以通過

npm install vue-cli -g

的方式安裝雅采，后面的-g表示全局安裝的意思，意味著你可以打開命令行之后直接通過vue命令調(diào)用它慨亲。
15.我該不該學(xué)Vue.js婚瓜？

現(xiàn)在Vue.js無論是發(fā)展勢頭還是作者支持還是很好的，而且它本身中文資料就比較多刑棵，教程也很多巴刻，現(xiàn)在隨隨便便打開幾個和前端開發(fā)有關(guān)的知乎專欄，基本上都能見到相關(guān)文章蛉签，社區(qū)也很活躍胡陪。

至于你該不該學(xué)，取決于你自己碍舍，如果你當(dāng)前只是做做以內(nèi)容展示為主的項目柠座，或者就是成天用各種CMS建站仿站，并且以后都不打算更換更好的工作片橡，那么可以暫時不用學(xué)妈经。如果你開發(fā)的項目交互非常多，而且前后端開發(fā)都對前后端分離有很清楚的認(rèn)識捧书，那么可以大膽的學(xué)習(xí)吹泡，并且在實際項目中運用。
16.Vue.js怎么火起來的经瓷？

關(guān)于這個問題爆哑，網(wǎng)上說法很多，我自己認(rèn)為主要還是前些年大前端變革太快舆吮，而最近一年開始Vue.js+Webpack這個組合開始逐漸穩(wěn)定下來了揭朝，而且已經(jīng)有了很多中文資料。

對比它的競爭對手AngularJS歪泳，新舊版本項目無法平滑升級萝勤，變革太大讓用戶感覺不安穩(wěn)露筒。

而React本身主流推薦用的是JSX呐伞，需要額外學(xué)習(xí)一門語法（什么？學(xué)Vue.js還要學(xué)ECMAScript6慎式？現(xiàn)在ECMAScript6是趨勢伶氢，并不是因為Vue.js才要學(xué)的）趟径，并且React本身用的是render寫法編寫模版代碼，這讓很多用習(xí)慣了Smarty等后端模版引擎得人來使用感覺很不適應(yīng)癣防，現(xiàn)在看來React本身在中國一些論壇社區(qū)的火爆程度還是沒有Vue.js高蜗巧。

當(dāng)然也并不是說除了Vue.js以外其他框架都很差。像知乎新版也是用React開發(fā)的蕾盯，他還是有各自優(yōu)秀的地方大家可以深入學(xué)習(xí)之后做出自己的判斷幕屹。
17.我在很多地方還看到Vuex和Vue-route，它們又是什么级遭？

Vuex是vue的一個狀態(tài)管理器望拖。用于集中管理一個單頁應(yīng)用程序中的各種狀態(tài)瑞妇。

Vue-route是vue的一個前端路由器家坎，這個路由器不是我們上網(wǎng)用的路由器争舞，而是一個管理請求入口和頁面映射關(guān)系的東西峰搪。它可以實現(xiàn)對頁面局部進行無刷新的替換默勾，讓用戶感覺就像切換到了網(wǎng)頁一樣曼月。

要講清楚這兩個東西四康，又得花費大量篇幅构舟，所以這里只是簡單提一下枫匾，先學(xué)好vue.js本身才是最重要的架诞。
18.我還在一些地方看到過Vue-resource和Axios，它們又是什么干茉？

我們在傳統(tǒng)的前后端不分離的開發(fā)中侈贷，后端直接把數(shù)據(jù)通過模版引擎拼接進了返回的HTML中。而現(xiàn)在做單頁應(yīng)用程序?qū)儆谇昂蠖朔蛛x開發(fā)等脂，那么這個單頁應(yīng)用程序中的數(shù)據(jù)就得通過ajax的方式獲取俏蛮，也要通過ajax的方式提交到后端。

在傳統(tǒng)開發(fā)中我們都是通過xmlhttprequest手動操作上遥，或者通過JQuery的ajax方法來進行數(shù)據(jù)提交獲取搏屑。

vue.js本身沒有封裝ajax操作庫，所以我們要通過Vue-resource和Axios來進行ajax操作粉楚，而因為種種原因辣恋，現(xiàn)在vue.js2.0已經(jīng)將axios作為官方推薦的ajax庫了。
19.我該學(xué)Vue.js2.0還是1.0呢模软？

現(xiàn)在很多框架和語言都是學(xué)新不學(xué)舊（Python慢慢也變得如此）伟骨，因此如果不是為了維護老舊項目，肯定推薦學(xué)Vue.js2.0燃异。而且學(xué)會了Vue.js2.0携狭，再去學(xué)習(xí)Vue.js1.0也不是什么難事。
20.寫Vue.js用什么開發(fā)工具和電腦呢回俐？

前端開發(fā)基本上不需要太高端的電腦都能勝任逛腿，現(xiàn)在這個時代是臺電腦稀并，裝個編輯器都可以做前端開發(fā)的。

Vue.js的組件文件本質(zhì)上還是普通的代碼文件单默，所以各種編輯器配合一些語法檢查插件就足夠了碘举。我自己用的是sublime text 3，安裝一些插件之后可以實現(xiàn).vue單文件組件高亮代碼以及各種自動完成搁廓。Webstorm中也有類似插件引颈，大家可以在網(wǎng)上各種教學(xué)文章的指導(dǎo)下配置好環(huán)境。
結(jié)語：

可能包括我在內(nèi)的很多人在看到Vue.js那神奇的雙向綁定優(yōu)雅寫法都會有一種非常驚艷境蜕，而看到中文文檔發(fā)布之后有種想立馬學(xué)習(xí)的沖動线欲。可惜大前端終究是大前端汽摹，如果一個對于前端各個方面沒有深入認(rèn)識就想著能一步登天李丰，肯定對不起大前端的“大”字。原本看著只想學(xué)一個Vue.js逼泣，沒想到順帶把ECMAScript6趴泌，Webpack配置，ESLint配置拉庶，bable配置嗜憔，npm使用，node.js語法氏仗，以后vue全家桶中的vuex吉捶，vue-route等等等等都學(xué)了一遍。前段時間網(wǎng)上也流傳出了一個職位叫做Webpack配置工程師皆尔，從這里也可以看出弄懂前端這個大雜燴確實不是那么容易呐舔。大家一起加油，有什么問題也可以在評論區(qū)回復(fù)慷蠕，我會抽空補充在文章內(nèi)容中珊拼。謝謝各位的支持！~

本文章由 @昌維 原創(chuàng)流炕，在知乎專欄-代碼之美 https://zhuanlan.zhihu.com/codes 首發(fā)澎现，轉(zhuǎn)載請注明出處。大家喜歡和支持我的文章可以點開我的頭像以及專欄名稱進行關(guān)注每辟，或是點擊下方的打賞按鈕進行支持剑辫，謝謝。_最近在逛各大網(wǎng)站渠欺，論壇妹蔽，以及像SegmentFault等編程問答社區(qū)，發(fā)現(xiàn)Vue.js異常火爆讹开，重復(fù)性的提問和內(nèi)容也很多盅视，樓主自己也趁著這個大前端的熱潮捐名，著手學(xué)習(xí)了一段時間的Vue.js旦万，目前用它正在做自己的結(jié)業(yè)項目。

在做的過程中也對Vue.js的官方文檔以及其各種特性有了許多認(rèn)識镶蹋。作為一個之前以PHP+模版引擎為主的開發(fā)成艘，從一個從未接觸過除HTML+CSS+JavaScript+JQuery以外的前端技術(shù)的人到現(xiàn)在可以獨立使用Vue.js以及各種附屬的UI庫來開發(fā)項目，我總結(jié)了一些知識和經(jīng)驗想與大家分享贺归。

下面我就以問答的形式來分享吧淆两。這里假設(shè)你僅僅只掌握了HTML+CSS+JavaScript，如果你對JQuery這個前端庫拂酣，以及各種后端模版語言比如說PHP秋冰，JSP還有所了解并且使用過的話那就太好了。

1.Vue.js是什么婶熬？

Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進式框架剑勾。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計赵颅。Vue 的核心庫只關(guān)注視圖層虽另，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項目整合饺谬。另一方面捂刺，Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件募寨。

如果你是有經(jīng)驗的前端開發(fā)者族展，想知道 Vue.js 與其它庫/框架的區(qū)別，查看對比其它框架拔鹰。

這是官網(wǎng)的介紹苛谷，是不是覺得非常的抽象非常的官方？看完之后可能還是有很多人不是很懂這個框架到底是用來做什么的格郁，什么是“漸進式框架”腹殿？什么是“自底向上增量開發(fā)”？什么是“視圖層”例书？什么是“單文件組件”锣尉？什么是“復(fù)雜的單頁應(yīng)用？”第二段話里面“響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件”這又是個啥决采？還有最后一段話自沧，“Vue.js 與其它庫/框架的區(qū)別”究竟是什么？

不要擔(dān)心，如果你慢慢看完這里面的所有問答拇厢，一定會對前面那些可能你從未聽說過的專業(yè)術(shù)語有一種恍然大悟的感覺爱谁。

2.Vue.js到底是什么？

想必現(xiàn)在能看到我這篇文章的人孝偎，都是用著APP或者網(wǎng)頁版知乎在閱讀把访敌。Vue.js就是一個用于搭建類似于網(wǎng)頁版知乎這種表單項繁多，且內(nèi)容需要根據(jù)用戶的操作進行修改的網(wǎng)頁版應(yīng)用衣盾。

3.單頁應(yīng)用程序（SPA）

顧名思義寺旺，單頁應(yīng)用一般指的就是一個頁面就是應(yīng)用，當(dāng)然也可以是一個子應(yīng)用势决，比如說知乎的一個頁面就可以視為一個子應(yīng)用阻塑。單頁應(yīng)用程序中一般交互處理非常多，而且頁面中的內(nèi)容需要根據(jù)用戶的操作動態(tài)變化果复。

4.你前面說的網(wǎng)頁版知乎我也可以用JQuery寫啊陈莽，為什么要用Vue.js呢？

講到JQuery虽抄，就不得不說到JavaScript的DOM操作了走搁。如果你用JQuery來開發(fā)一個知乎，那么你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結(jié)構(gòu)了极颓。

現(xiàn)在我們把一個網(wǎng)頁應(yīng)用抽象一下朱盐，那么HTML中的DOM其實就是視圖，一個網(wǎng)頁就是通過DOM的組合與嵌套菠隆，形成了最基本的視圖結(jié)構(gòu)兵琳，再通過CSS的修飾，在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來更加美觀骇径。最后涉及到交互部分躯肌，就需要用到JavaScript來接受用戶的交互請求，并且通過事件機制來響應(yīng)用戶的交互操作破衔，并且在事件的處理函數(shù)中進行各種數(shù)據(jù)的修改清女，比如說修改某個DOM中的innerHTML或者innerText部分。

我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次晰筛，這個層次就叫做視圖層嫡丙。

Vue 的核心庫只關(guān)注視圖層

我們?yōu)槭裁匆岩晥D層抽取出來并且單獨去關(guān)注它呢？

因為在像知乎這種頁面元素非常多读第，結(jié)構(gòu)很龐大的網(wǎng)頁中曙博，數(shù)據(jù)和視圖如果全部混雜在一起，像傳統(tǒng)開發(fā)一樣全部混合在HTML中怜瞒，那么要對它們進行處理會十分的費勁父泳，并且如果其中有幾個結(jié)構(gòu)之間存在藕斷絲連的關(guān)系，那么會導(dǎo)致代碼上出現(xiàn)更大的問題，這什么問題呢惠窄？

你是否還記得你當(dāng)初寫JQuery的時候蒸眠，有寫過$('#xxx').parent().parent().parent()這種代碼呢？當(dāng)你第一次寫的時候杆融，你覺得頁面元素不多楞卡，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在注釋里面寫清楚這個元素的爸爸的爸爸的爸爸不就好了擒贸。但是萬一過幾天之后你的項目組長或者你的產(chǎn)品經(jīng)理突然對你做的網(wǎng)頁提出修改要求臀晃，這個修改要求將會影響頁面的結(jié)構(gòu)觉渴，也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變介劫，那么$('#xxx').parent().parent().parent()可能就會變成$('#xxx').parent().parent().parent().parent().parent()了。

這還不算什么案淋，等以后產(chǎn)品迭代越來越快座韵，修改越來越多，而且頁面中類似的關(guān)聯(lián)和嵌套DOM元素不止一個踢京，那么修改起來將非常費勁誉碴。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的，可能到時候打開這個頁面瓣距，會變得越來越卡黔帕，而你卻無從下手。

當(dāng)你在編寫項目的時候遇到了這種問題蹈丸，你一定會抱怨成黄，為什么世上會有HTML這種像盜夢空間一樣的需要無數(shù)div嵌套才能做出頁面的語言，為什么當(dāng)初學(xué)JQuery看中的是它簡潔的DOM操作逻杖，現(xiàn)在卻一點也不覺得它有多簡潔奋岁，難道我學(xué)的是假的JQuery？為什么寫個代碼這么難荸百，你想砸電腦闻伶，你想一鍵盤拍在產(chǎn)品狗的腦袋上，責(zé)怪他天天改需求才讓你原本花清香茶清味的代碼變得如此又臭又長够话。

這個時候如果你學(xué)過Vue.js蓝翰，那么這些抱怨將不復(fù)存在。

5.Vue.js為什么能讓基于網(wǎng)頁的前端應(yīng)用程序開發(fā)起來這么方便女嘲？

因為Vue.js有聲明式畜份，響應(yīng)式的數(shù)據(jù)綁定，與組件化的開發(fā)澡为，并且還使用了Virtual DOM這個看名字就覺得高大上的技術(shù)漂坏。

可是這些名詞都是啥？

6.響應(yīng)式的數(shù)據(jù)綁定

這里的響應(yīng)式不是@media 媒體查詢中的響應(yīng)式布局，而是指vue.js會自動對頁面中某些數(shù)據(jù)的變化做出響應(yīng)顶别。至于是如何響應(yīng)的谷徙，大家可以先把下面這段代碼隨便粘貼到一個擴展名為html的文件然后用瀏覽器打開，隨便在文本框里面輸入一些文字驯绎，觀察一下頁面變化完慧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js測試 - 代碼之美專欄</title>
    <!-- author:昌維 代碼之美 https://zhuanlan.zhihu.com/codes -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="" value="" placeholder="在這里輸入文字，下面會跟著變化" v-model="message">
        <hr>
        <p>{{ message }}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
    </script>
</body>
</html>

是不是會發(fā)現(xiàn)一個很神奇的現(xiàn)象剩失，文本框里面輸入的文字和后面的p標(biāo)簽中的內(nèi)容一起變化屈尼？

換句話說，p標(biāo)簽里面通過{{ message }}這個寫法與input標(biāo)簽中的value綁定在了一起拴孤，其中變化脾歧，另外一個和它綁定的數(shù)據(jù)就跟著變化。

結(jié)合標(biāo)題來說演熟，就是vue.js會自動響應(yīng)數(shù)據(jù)的變化情況鞭执，并且根據(jù)用戶在代碼中預(yù)先寫好的綁定關(guān)系，對所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進行修改芒粹。而這種綁定關(guān)系兄纺，在圖上是以input 標(biāo)簽的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎化漆。

7.組件化開發(fā)

還記得在傳統(tǒng)前端開發(fā)的時候估脆，我們都是每個人做一個頁面，然后最后套入各種后端模版引擎座云，比如說PHP的Smarty或者Java的JSP等等疙赠。

但是現(xiàn)在我們做單頁應(yīng)用，頁面交互和結(jié)構(gòu)十分復(fù)雜疙教，一個頁面上就有許許多多的模塊需要編寫棺聊，而且往往一個模塊的代碼量和工作量就非常龐大，如果還按照原先的方法來開發(fā)贞谓，那么會累死人限佩。而且遇到以后的產(chǎn)品需求變更，修改起來也非常麻煩裸弦，生怕動了其中一個div之后祟同，其他div跟著雪崩，整個頁面全部亂套理疙，或者由于JavaScript的事件冒泡機制晕城，導(dǎo)致修改一些內(nèi)層的DOM事件處理函數(shù)之后，出現(xiàn)各種莫名其妙的詭異BUG窖贤。

在面向?qū)ο缶幊讨凶┣辏覀兛梢允褂妹嫦驅(qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個大的業(yè)務(wù)模塊拆分成更多更小的幾個類贰锁。在面向過程編程中，我們也可以把一些大功能拆分成許多函數(shù)滤蝠，然后分配給不同的人來開發(fā)豌熄。

在前端應(yīng)用，我們是否也可以像編程一樣把模塊封裝呢物咳？這就引入了組件化開發(fā)的思想锣险。

Vue.js通過組件，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中览闰，我們只要先在父級應(yīng)用中寫好各種組件標(biāo)簽（占坑）芯肤，并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性）压鉴，然后再分別寫好各種組件的實現(xiàn)（填坑）崖咨，然后整個應(yīng)用就算做完了。

8.Virtual DOM

現(xiàn)在的網(wǎng)速越來越快了晴弃，很多人家里都是幾十甚至上百M的光纖掩幢，手機也是4G起步了逊拍，按道理一個網(wǎng)頁才幾百K上鞠，而且瀏覽器本身還會緩存很多資源文件，那么幾十M的光纖為什么打開一個之前已經(jīng)打開過芯丧，已經(jīng)有緩存的頁面還是感覺很慢呢芍阎？這就是因為瀏覽器本身處理DOM也是有性能瓶頸的，尤其是在傳統(tǒng)開發(fā)中缨恒，用JQuery或者原生的JavaScript DOM操作函數(shù)對DOM進行頻繁操作的時候谴咸，瀏覽器要不停的渲染新的DOM樹，導(dǎo)致頁面看起來非称叮卡頓岭佳。

而Virtual DOM則是虛擬DOM的英文，簡單來說萧锉，他就是一種可以預(yù)先通過JavaScript進行各種計算珊随，把最終的DOM操作計算出來并優(yōu)化，由于這個DOM操作屬于預(yù)處理操作柿隙，并沒有真實的操作DOM叶洞，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交禀崖，將DOM操作變化反映到DOM樹上衩辟。

對于vue.js的Virtual DOM，目前業(yè)界有著褒貶不一的評價波附。有人認(rèn)為Vue.js作為一個輕量級框架艺晴，引入Virtual DOM會加大Vue.js本身的代碼尺寸昼钻，也會消耗更多CPU（手機上會更耗電）（注意：消耗更多的CPU并不意味著會更卡，因為JavaScript計算是后臺計算封寞，他的計算量還不至于讓DOM操作變得卡頓）换吧，并且在操作單個DOM元素的時候，反而多了一道計算工序钥星，會更慢沾瓦。但也有人認(rèn)為基本上會用Vue.js開發(fā)的都是頁面中內(nèi)容很多的元素，肯定操作的DOM量級普遍較大谦炒，平均一下還是比較劃算的贯莺。

9.我到底該怎么用Vue.js做單頁應(yīng)用開發(fā)？

說了這么多宁改，我還是不知道怎么用它做出一個像知乎那樣的頁面啊缕探，到底怎么學(xué)它呢？

前面我們看了一個響應(yīng)式的數(shù)據(jù)綁定案例还蹲，那只是一個DEMO爹耗，而且也看不出有什么實際意義，離真正的單頁應(yīng)用程序還差得遠谜喊，到底怎么用它開發(fā)真實的項目呢潭兽？

我的建議是，先把介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍斗遏。除了組件這個小節(jié)涉及到了很多晦澀難懂的名詞以外山卦，前面幾章完全就是把Vue.js當(dāng)作一個模版引擎來用。

然后開始學(xué)習(xí)ECMAScript6诵次，Webpack账蓉，NPM以及Vue-Cli的基本用法，最好對Node.js也要有所了解逾一。

最后組件部分先大致看一遍铸本，了解組件里面都有哪些概念之后，開始看網(wǎng)上各種實戰(zhàn)視頻以及文章還有別人開源的源代碼遵堵。

10.在前面你提到過好幾次ECMAScript箱玷，這是啥？

ECMAScript聽名字好像和JavaScript很像鄙早，難不成他們有什么千絲萬縷的聯(lián)系汪茧？

沒錯你猜對了，他們之間還真有著很深的聯(lián)系限番。

引用阮一峰老師的話：（ECMAScript 6入門）

要講清楚這個問題舱污，需要回顧歷史。1996年11月弥虐，JavaScript 的創(chuàng)造者 Netscape 公司扩灯，決定將 JavaScript 提交給國際標(biāo)準(zhǔn)化組織ECMA媚赖，希望這種語言能夠成為國際標(biāo)準(zhǔn)。次年珠插，ECMA 發(fā)布262號標(biāo)準(zhǔn)文件（ECMA-262）的第一版惧磺，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)，并將這種語言稱為 ECMAScript捻撑，這個版本就是1.0版磨隘。

該標(biāo)準(zhǔn)從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript顾患，有兩個原因番捂。一是商標(biāo)，Java 是 Sun 公司的商標(biāo)江解，根據(jù)授權(quán)協(xié)議设预，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 本身也已經(jīng)被 Netscape 公司注冊為商標(biāo)犁河。二是想體現(xiàn)這門語言的制定者是 ECMA鳖枕，不是 Netscape，這樣有利于保證這門語言的開放性和中立性桨螺。

因此宾符，ECMAScript 和 JavaScript 的關(guān)系是，前者是后者的規(guī)格彭谁，后者是前者的一種實現(xiàn)（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）吸奴。日常場合，這兩個詞是可以互換的缠局。

而ECMAScript6就是新一代的JavaScript語言。

這里也強烈推薦大家學(xué)習(xí)ECMAScript6的時候參考這本書ECMAScript 6入門

11.我在學(xué)習(xí)Vue.js的時候老是聽到Webpack考润，這是啥狭园？

Webpack是一個前端打包和構(gòu)建工具。如果你之前一直是手寫HTML糊治，CSS唱矛，JavaScript，并且通過link標(biāo)簽將CSS引入你的HTML文件井辜，以及通過Script標(biāo)簽的src屬性引入外部的JS腳本绎谦，那么你肯定會對這個工具感到陌生。不要緊粥脚，我們先來了解一下為什么要用Webpack窃肠，然后帶著原因去學(xué)習(xí)就好了。

12.為什么要用Webpack

前面說了刷允，做一個單頁應(yīng)用程序本身就相當(dāng)復(fù)雜冤留，而且在做的時候肯定會使用到很多素材和別的第三方庫碧囊，我們該如何去管理這些東西呢？

還有前面講到了Webpack是一個前端打包工具纤怒，前端代碼為什么要打包呢糯而？因為單頁應(yīng)用程序中用到很多素材，如果每一個素材都通過在HTML中以src屬性或者link來引入泊窘，那么請求一個頁面的時候熄驼，可能瀏覽器就要發(fā)起十多次請求，往往請求的這些資源都是一些腳本代碼或者很小的圖片烘豹，這些資源本身才幾k谜洽，下載連1秒都不需要，但是由于HTTP是應(yīng)用層協(xié)議吴叶，它的下層是TCP這個運輸層協(xié)議阐虚，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長，所以需要把這些小文件全部打包成一個文件蚌卤，這樣只要一次TCP握手和揮手的過程实束，就把多個資源給下載下來了，并且多個資源由于都是共享一個HTTP請求逊彭，所以head等部分也是共享的咸灿，相當(dāng)于形成了規(guī)模效應(yīng)，讓網(wǎng)頁展現(xiàn)更快侮叮，用戶體驗更好避矢。

前面說到Webpack還有構(gòu)建的功能，這就不得不提到了ECMAScript6這個新版本的JavaScript囊榜，但是現(xiàn)在國內(nèi)外還有很多人用著老版本的瀏覽器审胸，這些瀏覽器并不支持ECMAScript6，那么我們的前端項目如何在這種瀏覽器上運行呢卸勺？這就需要Webpack的Loader自動載入一個轉(zhuǎn)換器來將我們寫的ECMAScript6轉(zhuǎn)換成瀏覽器能支持的老版本JavaScript語言砂沛，這個轉(zhuǎn)換器的名字叫做babel，如果你以后聽到或者看到了這個單詞曙求，應(yīng)該要知道它就是一個ECMAScript6 to 老版本JavaScript的轉(zhuǎn)換器了碍庵。這也是Webpack的構(gòu)建功能。當(dāng)然對前端有更深入的同學(xué)還會知道Sass悟狱，Less静浴，stylus之類的CSS預(yù)處理器，我們也可以通過在Loader中編寫特定的規(guī)則來實現(xiàn)自動將這些CSS預(yù)處理語言轉(zhuǎn)換成普通瀏覽器能識別的CSS代碼挤渐。

開頭的介紹提到了vue.js可以使用單文件組件開發(fā)項目苹享，其實也是通過Webpack將單文件組件中的模版，樣式以及JS轉(zhuǎn)換到主頁面中

當(dāng)然Webpack不止這點功能挣菲，它還可以通過安裝各種插件來擴展富稻，比如說熱加載技術(shù)掷邦，就是解放鍵盤的F5鍵。讓我們修改代碼椭赋，并且按Ctrl+S保存之后抚岗，瀏覽器頁面自動刷新變化，不需要我們?nèi)ナ謩铀⑿履恼€有一些插件可以自動添加注釋宣蔚，自動給CSS代碼加上一些瀏覽器內(nèi)核對CSS3兼容前綴，就像webkit-xxx之類的一樣认境。

13.NPM和Node.js又是什么胚委？它們是什么關(guān)系？

首先講講Node.js叉信。我們知道通常情況下亩冬，JavaScript的運行環(huán)境都是瀏覽器，因此JavaScript的能力也就局限于瀏覽器能賦予它的權(quán)限了硼身。比如說讀寫本地系統(tǒng)文件這種操作硅急，一般情況下運行在瀏覽器中的JavaScript代碼是沒有這個操作權(quán)限的。如果我們想用JavaScript寫出一些能夠運行在操作系統(tǒng)上的佳遂，能夠具有像PHP营袜，JAVA之類的編程語言具有的功能的程序該怎么辦呢？Node.js就解決了這個問題丑罪。Node.js是一個服務(wù)端的JavaScript運行環(huán)境荚板，通過Node.js可以實現(xiàn)用JavaScript寫?yīng)毩⒊绦颉Ｏ裎覀冎疤岬降腤ebpack就是Node.js寫的吩屹，所以作為一個前端開發(fā)跪另，即使你不用Node.js寫?yīng)毩⒊绦颍驳门湟粋€Node.js運行環(huán)境祟峦，畢竟很多前端工具都是使用它寫的罚斗。

NPM是一個node.js的包管理器。我們在傳統(tǒng)開發(fā)的時候宅楞，JQuery.js大多都是百度搜索，然后去官網(wǎng)下載袱吆，或者直接引入CDN資源厌衙，這種方法太過于麻煩。如果以后遇到其他的包绞绒，這個包的代碼本身可能還調(diào)用了其他的包（也稱這個包和其他的那幾個包存在依賴關(guān)系）婶希，那么我們要在自己的項目中引入一個包將變得十分困難。現(xiàn)在我們有了NPM這個包管理器蓬衡，直接可以通過

npm install xxx包名稱

的方式引入它喻杈，比如說

npm install vue

就自動在當(dāng)前項目文件夾下導(dǎo)入了這個包彤枢，并且npm自動下載好了vue這個包依賴的其他包。

至于有的人在按照網(wǎng)上的npm教程配置的時候踩坑了筒饰，發(fā)現(xiàn)下載速度很慢或者完全下載不了缴啡，那是因為我國有著眾所周知的原因，網(wǎng)上也有各種解決方法可以解決這個問題瓷们，大家多善用搜索引擎业栅。

前面提到了Webpack可以安裝各種插件來擴展功能，其實也是通過這種方式擴展谬晕。

如果你學(xué)過PHP的話碘裕，NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多攒钳。

14.Vue-CLi又是啥帮孔？

它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄不撑，配置好Webpack文兢，以及各種依賴包的工具，它可以通過

npm install vue-cli -g

的方式安裝燎孟，后面的-g表示全局安裝的意思禽作，意味著你可以打開命令行之后直接通過vue命令調(diào)用它。

15.我該不該學(xué)Vue.js揩页？

現(xiàn)在Vue.js無論是發(fā)展勢頭還是作者支持還是很好的旷偿，而且它本身中文資料就比較多，教程也很多爆侣，現(xiàn)在隨隨便便打開幾個和前端開發(fā)有關(guān)的知乎專欄萍程，基本上都能見到相關(guān)文章，社區(qū)也很活躍兔仰。

至于你該不該學(xué)茫负，取決于你自己，如果你當(dāng)前只是做做以內(nèi)容展示為主的項目乎赴，或者就是成天用各種CMS建站仿站忍法，并且以后都不打算更換更好的工作，那么可以暫時不用學(xué)榕吼。如果你開發(fā)的項目交互非常多饿序，而且前后端開發(fā)都對前后端分離有很清楚的認(rèn)識，那么可以大膽的學(xué)習(xí)羹蚣，并且在實際項目中運用原探。

16.Vue.js怎么火起來的？

關(guān)于這個問題，網(wǎng)上說法很多咽弦，我自己認(rèn)為主要還是前些年大前端變革太快徒蟆，而最近一年開始Vue.js+Webpack這個組合開始逐漸穩(wěn)定下來了，而且已經(jīng)有了很多中文資料型型。

對比它的競爭對手AngularJS段审，新舊版本項目無法平滑升級，變革太大讓用戶感覺不安穩(wěn)输莺。

而React本身主流推薦用的是JSX戚哎，需要額外學(xué)習(xí)一門語法（什么？學(xué)Vue.js還要學(xué)ECMAScript6嫂用？現(xiàn)在ECMAScript6是趨勢型凳，并不是因為Vue.js才要學(xué)的），并且React本身用的是render寫法編寫模版代碼嘱函，這讓很多用習(xí)慣了Smarty等后端模版引擎得人來使用感覺很不適應(yīng)甘畅，現(xiàn)在看來React本身在中國一些論壇社區(qū)的火爆程度還是沒有Vue.js高。

當(dāng)然也并不是說除了Vue.js以外其他框架都很差往弓。像知乎新版也是用React開發(fā)的疏唾，他還是有各自優(yōu)秀的地方大家可以深入學(xué)習(xí)之后做出自己的判斷。

17.我在很多地方還看到Vuex和Vue-route函似，它們又是什么槐脏？

Vuex是vue的一個狀態(tài)管理器。用于集中管理一個單頁應(yīng)用程序中的各種狀態(tài)撇寞。

Vue-route是vue的一個前端路由器顿天，這個路由器不是我們上網(wǎng)用的路由器，而是一個管理請求入口和頁面映射關(guān)系的東西蔑担。它可以實現(xiàn)對頁面局部進行無刷新的替換牌废，讓用戶感覺就像切換到了網(wǎng)頁一樣。

要講清楚這兩個東西啤握，又得花費大量篇幅鸟缕，所以這里只是簡單提一下，先學(xué)好vue.js本身才是最重要的排抬。

18.我還在一些地方看到過Vue-resource和Axios懂从，它們又是什么？

我們在傳統(tǒng)的前后端不分離的開發(fā)中蹲蒲，后端直接把數(shù)據(jù)通過模版引擎拼接進了返回的HTML中莫绣。而現(xiàn)在做單頁應(yīng)用程序?qū)儆谇昂蠖朔蛛x開發(fā)，那么這個單頁應(yīng)用程序中的數(shù)據(jù)就得通過ajax的方式獲取悠鞍，也要通過ajax的方式提交到后端。

在傳統(tǒng)開發(fā)中我們都是通過xmlhttprequest手動操作，或者通過JQuery的ajax方法來進行數(shù)據(jù)提交獲取咖祭。

vue.js本身沒有封裝ajax操作庫掩宜，所以我們要通過Vue-resource和Axios來進行ajax操作，而因為種種原因么翰，現(xiàn)在vue.js2.0已經(jīng)將axios作為官方推薦的ajax庫了牺汤。

19.我該學(xué)Vue.js2.0還是1.0呢？

現(xiàn)在很多框架和語言都是學(xué)新不學(xué)舊（Python慢慢也變得如此）浩嫌，因此如果不是為了維護老舊項目檐迟，肯定推薦學(xué)Vue.js2.0。而且學(xué)會了Vue.js2.0码耐，再去學(xué)習(xí)Vue.js1.0也不是什么難事追迟。

20.寫Vue.js用什么開發(fā)工具和電腦呢？

前端開發(fā)基本上不需要太高端的電腦都能勝任骚腥，現(xiàn)在這個時代是臺電腦敦间，裝個編輯器都可以做前端開發(fā)的。

Vue.js的組件文件本質(zhì)上還是普通的代碼文件束铭，所以各種編輯器配合一些語法檢查插件就足夠了廓块。我自己用的是sublime text 3，安裝一些插件之后可以實現(xiàn).vue單文件組件高亮代碼以及各種自動完成契沫。Webstorm中也有類似插件带猴，大家可以在網(wǎng)上各種教學(xué)文章的指導(dǎo)下配置好環(huán)境胸嘁。

結(jié)語：

可能包括我在內(nèi)的很多人在看到Vue.js那神奇的雙向綁定優(yōu)雅寫法都會有一種非常驚艷陨晶，而看到中文文檔發(fā)布之后有種想立馬學(xué)習(xí)的沖動」还遥可惜大前端終究是大前端钞速，如果一個對于前端各個方面沒有深入認(rèn)識就想著能一步登天贷掖，肯定對不起大前端的“大”字。原本看著只想學(xué)一個Vue.js渴语，沒想到順帶把ECMAScript6苹威，Webpack配置，ESLint配置驾凶，bable配置牙甫，npm使用，node.js語法调违，以后vue全家桶中的vuex窟哺，vue-route等等等等都學(xué)了一遍。前段時間網(wǎng)上也流傳出了一個職位叫做Webpack配置工程師技肩，從這里也可以看出弄懂前端這個大雜燴確實不是那么容易且轨。大家一起加油，有什么問題也可以在評論區(qū)回復(fù)，我會抽空補充在文章內(nèi)容中旋奢。謝謝各位的支持泳挥！~

本文章由 @昌維 原創(chuàng)，在知乎專欄-代碼之美 https://zhuanlan.zhihu.com/codes 首發(fā)至朗，轉(zhuǎn)載請注明出處屉符。大家喜歡和支持我的文章可以點開我的頭像以及專欄名稱進行關(guān)注，或是點擊下方的打賞按鈕進行支持锹引，謝謝矗钟。_

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市嫌变，隨后出現(xiàn)的幾起案子吨艇，更是在濱河造成了極大的恐慌，老刑警劉巖初澎，帶你破解...
    沈念sama閱讀 219,366評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件秸应，死亡現(xiàn)場離奇詭異，居然都是意外死亡碑宴，警方通過查閱死者的電腦和手機软啼，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來延柠，“玉大人祸挪，你說我怎么就攤上這事≌昙洌” “怎么了贿条？”我有些...
    開封第一講書人閱讀 165,689評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長增热。 經(jīng)常有香客問我整以，道長，這世上最難降的妖魔是什么峻仇？ 我笑而不...
    開封第一講書人閱讀 58,925評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任公黑，我火速辦了婚禮，結(jié)果婚禮上摄咆，老公的妹妹穿的比我還像新娘凡蚜。我一直安慰自己，他們只是感情好吭从，可當(dāng)我...
    茶點故事閱讀 67,942評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布朝蜘。 她就那樣靜靜地躺著，像睡著了一般涩金。 火紅的嫁衣襯著肌膚如雪谱醇。 梳的紋絲不亂的頭發(fā)上暇仲，一...
    開封第一講書人閱讀 51,727評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音枣抱，去河邊找鬼熔吗。 笑死，一個胖子當(dāng)著我的面吹牛佳晶，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播讼载，決...
    沈念sama閱讀 40,447評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼轿秧，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了咨堤？” 一聲冷哼從身側(cè)響起菇篡，我...
    開封第一講書人閱讀 39,349評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎一喘，沒想到半個月后驱还，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,820評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡凸克，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年议蟆，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片萎战。...
    茶點故事閱讀 40,127評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡咐容，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出蚂维，到底是詐尸還是另有隱情戳粒，我是刑警寧澤，帶...
    沈念sama閱讀 35,812評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布虫啥，位于F島的核電站蔚约，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏涂籽。R本人自食惡果不足惜苹祟，卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望又活。 院中可真熱鬧苔咪，春花似錦、人聲如沸柳骄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽耐薯。三九已至舔清，卻和暖如春丝里，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背体谒。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工杯聚， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人抒痒。 一個月前我還...
    沈念sama閱讀 48,388評論 3贊 373
  • 代替公主和親
    正文 我出身青樓幌绍，卻偏偏與公主長得像，于是被迫代替她去往敵國和親故响。 傳聞我的和親對象是個殘疾皇子傀广，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2贊 355