摘要:就是一個(gè)用于搭建類(lèi)似于網(wǎng)頁(yè)版知乎這種表單項(xiàng)繁多,且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁(yè)版應(yīng)用。單頁(yè)應(yīng)用程序顧名思義,單頁(yè)應(yīng)用一般指的就是一個(gè)頁(yè)面就是應(yīng)用,當(dāng)然也可以是一個(gè)子應(yīng)用,比如說(shuō)知乎的一個(gè)頁(yè)面就可以視為一個(gè)子應(yīng)用。
最近在逛各大網(wǎng)站,論壇,以及像SegmentFault等編程問(wèn)答社區(qū),發(fā)現(xiàn)Vue.js異常火爆,重復(fù)性的提問(wèn)和內(nèi)容也很多,樓主自己也趁著這個(gè)大前端的熱潮,著手學(xué)習(xí)了一段時(shí)間的Vue.js,目前用它正在做自己的結(jié)業(yè)項(xiàng)目。
在做的過(guò)程中也對(duì)Vue.js的官方文檔以及其各種特性有了許多認(rèn)識(shí)。作為一個(gè)之前以PHP+模版引擎為主的開(kāi)發(fā),從一個(gè)從未接觸過(guò)除HTML+CSS+JavaScript+JQuery以外的前端技術(shù)的人到現(xiàn)在可以獨(dú)立使用Vue.js以及各種附屬的UI庫(kù)來(lái)開(kāi)發(fā)項(xiàng)目,我總結(jié)了一些知識(shí)和經(jīng)驗(yàn)想與大家分享。
下面我就以問(wèn)答的形式來(lái)分享吧。這里假設(shè)你僅僅只掌握了HTML+CSS+JavaScript,如果你對(duì)JQuery這個(gè)前端庫(kù),以及各種后端模版語(yǔ)言比如說(shuō)PHP,JSP還有所了解并且使用過(guò)的話那就太好了。
1.Vue.js是什么?Vue.js(讀音 /vju?/, 類(lèi)似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面,Vue 完全有能力驅(qū)動(dòng)采用單文件組件和?Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
如果你是有經(jīng)驗(yàn)的前端開(kāi)發(fā)者,想知道 Vue.js 與其它庫(kù)/框架的區(qū)別,查看對(duì)比其它框架。
這是官網(wǎng)的介紹,是不是覺(jué)得非常的抽象非常的官方?看完之后可能還是有很多人不是很懂這個(gè)框架到底是用來(lái)做什么的,什么是“漸進(jìn)式框架”?什么是“自底向上增量開(kāi)發(fā)”?什么是“視圖層”?什么是“單文件組件”?什么是“復(fù)雜的單頁(yè)應(yīng)用?”第二段話里面“響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件”這又是個(gè)啥?還有最后一段話,“Vue.js 與其它庫(kù)/框架的區(qū)別”究竟是什么?
不要擔(dān)心,如果你慢慢看完這里面的所有問(wèn)答,一定會(huì)對(duì)前面那些可能你從未聽(tīng)說(shuō)過(guò)的專(zhuān)業(yè)術(shù)語(yǔ)有一種恍然大悟的感覺(jué)。
2.Vue.js到底是什么?想必現(xiàn)在能看到我這篇文章的人,都是用著APP或者網(wǎng)頁(yè)版知乎在閱讀吧。Vue.js就是一個(gè)用于搭建類(lèi)似于網(wǎng)頁(yè)版知乎這種表單項(xiàng)繁多,且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁(yè)版應(yīng)用。
3.單頁(yè)應(yīng)用程序(SPA)顧名思義,單頁(yè)應(yīng)用一般指的就是一個(gè)頁(yè)面就是應(yīng)用,當(dāng)然也可以是一個(gè)子應(yīng)用,比如說(shuō)知乎的一個(gè)頁(yè)面就可以視為一個(gè)子應(yīng)用。單頁(yè)應(yīng)用程序中一般交互處理非常多,而且頁(yè)面中的內(nèi)容需要根據(jù)用戶的操作動(dòng)態(tài)變化。
4.你前面說(shuō)的網(wǎng)頁(yè)版知乎我也可以用JQuery寫(xiě)啊,為什么要用Vue.js呢?講到JQuery,就不得不說(shuō)到JavaScript的DOM操作了。如果你用JQuery來(lái)開(kāi)發(fā)一個(gè)知乎,那么你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結(jié)構(gòu)了。
現(xiàn)在我們把一個(gè)網(wǎng)頁(yè)應(yīng)用抽象一下,那么HTML中的DOM其實(shí)就是視圖,一個(gè)網(wǎng)頁(yè)就是通過(guò)DOM的組合與嵌套,形成了最基本的視圖結(jié)構(gòu),再通過(guò)CSS的修飾,在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來(lái)更加美觀。最后涉及到交互部分,就需要用到JavaScript來(lái)接受用戶的交互請(qǐng)求,并且通過(guò)事件機(jī)制來(lái)響應(yīng)用戶的交互操作,并且在事件的處理函數(shù)中進(jìn)行各種數(shù)據(jù)的修改,比如說(shuō)修改某個(gè)DOM中的innerHTML或者innerText部分。
我們把HTML中的DOM就可以與其他的部分獨(dú)立開(kāi)來(lái)劃分出一個(gè)層次,這個(gè)層次就叫做視圖層。
Vue 的核心庫(kù)只關(guān)注視圖層
我們?yōu)槭裁匆岩晥D層抽取出來(lái)并且多帶帶去關(guān)注它呢?
因?yàn)樵谙裰踹@種頁(yè)面元素非常多,結(jié)構(gòu)很龐大的網(wǎng)頁(yè)中,數(shù)據(jù)和視圖如果全部混雜在一起,像傳統(tǒng)開(kāi)發(fā)一樣全部混合在HTML中,那么要對(duì)它們進(jìn)行處理會(huì)十分的費(fèi)勁,并且如果其中有幾個(gè)結(jié)構(gòu)之間存在藕斷絲連的關(guān)系,那么會(huì)導(dǎo)致代碼上出現(xiàn)更大的問(wèn)題,這什么問(wèn)題呢?
你是否還記得你當(dāng)初寫(xiě)JQuery的時(shí)候,有寫(xiě)過(guò)$("#xxx").parent().parent().parent()這種代碼呢?當(dāng)你第一次寫(xiě)的時(shí)候,你覺(jué)得頁(yè)面元素不多,不就是找這個(gè)元素的爸爸的爸爸的爸爸嗎,我大不了在注釋里面寫(xiě)清楚這個(gè)元素的爸爸的爸爸的爸爸不就好了。但是萬(wàn)一過(guò)幾天之后你的項(xiàng)目組長(zhǎng)或者你的產(chǎn)品經(jīng)理突然對(duì)你做的網(wǎng)頁(yè)提出修改要求,這個(gè)修改要求將會(huì)影響頁(yè)面的結(jié)構(gòu),也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變,那么$("#xxx").parent().parent().parent()可能就會(huì)變成$("#xxx").parent().parent().parent().parent().parent()了。
這還不算什么,等以后產(chǎn)品迭代越來(lái)越快,修改越來(lái)越多,而且頁(yè)面中類(lèi)似的關(guān)聯(lián)和嵌套DOM元素不止一個(gè),那么修改起來(lái)將非常費(fèi)勁。而且JQuery選擇器查找頁(yè)面元素以及DOM操作本身也是有性能損失的,可能到時(shí)候打開(kāi)這個(gè)頁(yè)面,會(huì)變得越來(lái)越卡,而你卻無(wú)從下手。
當(dāng)你在編寫(xiě)項(xiàng)目的時(shí)候遇到了這種問(wèn)題,你一定會(huì)抱怨,為什么世上會(huì)有HTML這種像盜夢(mèng)空間一樣的需要無(wú)數(shù)div嵌套才能做出頁(yè)面的語(yǔ)言,為什么當(dāng)初學(xué)JQuery看中的是它簡(jiǎn)潔的DOM操作,現(xiàn)在卻一點(diǎn)也不覺(jué)得它有多簡(jiǎn)潔,難道我學(xué)的是假的JQuery?為什么寫(xiě)個(gè)代碼這么難,你想砸電腦,你想一鍵盤(pán)拍在產(chǎn)品狗的腦袋上,責(zé)怪他天天改需求才讓你原本花清香茶清味的代碼變得如此又臭又長(zhǎng)。
這個(gè)時(shí)候如果你學(xué)過(guò)Vue.js,那么這些抱怨將不復(fù)存在。
5.Vue.js為什么能讓基于網(wǎng)頁(yè)的前端應(yīng)用程序開(kāi)發(fā)起來(lái)這么方便?因?yàn)閂ue.js有聲明式,響應(yīng)式的數(shù)據(jù)綁定,與組件化的開(kāi)發(fā),并且還使用了Virtual DOM這個(gè)看名字就覺(jué)得高大上的技術(shù)。
可是這些名詞都是啥?
6.響應(yīng)式的數(shù)據(jù)綁定這里的響應(yīng)式不是@media 媒體查詢中的響應(yīng)式布局,而是指vue.js會(huì)自動(dòng)對(duì)頁(yè)面中某些數(shù)據(jù)的變化做出響應(yīng)。至于是如何響應(yīng)的,大家可以先把下面這段代碼隨便粘貼到一個(gè)擴(kuò)展名為html的文件然后用瀏覽器打開(kāi),隨便在文本框里面輸入一些文字,觀察一下頁(yè)面變化。
vue.js測(cè)試 - 代碼之美專(zhuān)欄
{{ message }}
是不是會(huì)發(fā)現(xiàn)一個(gè)很神奇的現(xiàn)象,文本框里面輸入的文字和后面的p標(biāo)簽中的內(nèi)容一起變化?
換句話說(shuō),p標(biāo)簽里面通過(guò){{ message }}這個(gè)寫(xiě)法與input標(biāo)簽中的value綁定在了一起,其中變化,另外一個(gè)和它綁定的數(shù)據(jù)就跟著變化。
結(jié)合標(biāo)題來(lái)說(shuō),就是vue.js會(huì)自動(dòng)響應(yīng)數(shù)據(jù)的變化情況,并且根據(jù)用戶在代碼中預(yù)先寫(xiě)好的綁定關(guān)系,對(duì)所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進(jìn)行修改。而這種綁定關(guān)系,在圖上是以input 標(biāo)簽的v-model屬性來(lái)聲明的,因此你在別的地方可能也會(huì)看到有人粗略的稱vue.js為聲明式渲染的模版引擎。
7.組件化開(kāi)發(fā)還記得在傳統(tǒng)前端開(kāi)發(fā)的時(shí)候,我們都是每個(gè)人做一個(gè)頁(yè)面,然后最后套入各種后端模版引擎,比如說(shuō)PHP的Smarty或者Java的JSP等等。
但是現(xiàn)在我們做單頁(yè)應(yīng)用,頁(yè)面交互和結(jié)構(gòu)十分復(fù)雜,一個(gè)頁(yè)面上就有許許多多的模塊需要編寫(xiě),而且往往一個(gè)模塊的代碼量和工作量就非常龐大,如果還按照原先的方法來(lái)開(kāi)發(fā),那么會(huì)累死人。而且遇到以后的產(chǎn)品需求變更,修改起來(lái)也非常麻煩,生怕動(dòng)了其中一個(gè)div之后,其他div跟著雪崩,整個(gè)頁(yè)面全部亂套,或者由于JavaScript的事件冒泡機(jī)制,導(dǎo)致修改一些內(nèi)層的DOM事件處理函數(shù)之后,出現(xiàn)各種莫名其妙的詭異BUG。
在面向?qū)ο缶幊讨校覀兛梢允褂妹嫦驅(qū)ο蟮乃枷雽⒏鞣N模塊打包成類(lèi)或者把一個(gè)大的業(yè)務(wù)模塊拆分成更多更小的幾個(gè)類(lèi)。在面向過(guò)程編程中,我們也可以把一些大功能拆分成許多函數(shù),然后分配給不同的人來(lái)開(kāi)發(fā)。
在前端應(yīng)用,我們是否也可以像編程一樣把模塊封裝呢?這就引入了組件化開(kāi)發(fā)的思想。
Vue.js通過(guò)組件,把一個(gè)單頁(yè)應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)多帶帶的組件(component)中,我們只要先在父級(jí)應(yīng)用中寫(xiě)好各種組件標(biāo)簽(占坑),并且在組件標(biāo)簽中寫(xiě)好要傳入組件的參數(shù)(就像給函數(shù)傳入?yún)?shù)一樣,這個(gè)參數(shù)叫做組件的屬性),然后再分別寫(xiě)好各種組件的實(shí)現(xiàn)(填坑),然后整個(gè)應(yīng)用就算做完了。
8.Virtual DOM現(xiàn)在的網(wǎng)速越來(lái)越快了,很多人家里都是幾十甚至上百M(fèi)的光纖,手機(jī)也是4G起步了,按道理一個(gè)網(wǎng)頁(yè)才幾百K,而且瀏覽器本身還會(huì)緩存很多資源文件,那么幾十M的光纖為什么打開(kāi)一個(gè)之前已經(jīng)打開(kāi)過(guò),已經(jīng)有緩存的頁(yè)面還是感覺(jué)很慢呢?這就是因?yàn)闉g覽器本身處理DOM也是有性能瓶頸的,尤其是在傳統(tǒng)開(kāi)發(fā)中,用JQuery或者原生的JavaScript DOM操作函數(shù)對(duì)DOM進(jìn)行頻繁操作的時(shí)候,瀏覽器要不停的渲染新的DOM樹(shù),導(dǎo)致頁(yè)面看起來(lái)非常卡頓。
而Virtual DOM則是虛擬DOM的英文,簡(jiǎn)單來(lái)說(shuō),他就是一種可以預(yù)先通過(guò)JavaScript進(jìn)行各種計(jì)算,把最終的DOM操作計(jì)算出來(lái)并優(yōu)化,由于這個(gè)DOM操作屬于預(yù)處理操作,并沒(méi)有真實(shí)的操作DOM,所以叫做虛擬DOM。最后在計(jì)算完畢才真正將DOM操作提交,將DOM操作變化反映到DOM樹(shù)上。
對(duì)于vue.js的Virtual DOM,目前業(yè)界有著褒貶不一的評(píng)價(jià)。有人認(rèn)為Vue.js作為一個(gè)輕量級(jí)框架,引入Virtual DOM會(huì)加大Vue.js本身的代碼尺寸,也會(huì)消耗更多CPU(手機(jī)上會(huì)更耗電)(注意:消耗更多的CPU并不意味著會(huì)更卡,因?yàn)镴avaScript計(jì)算是后臺(tái)計(jì)算,他的計(jì)算量還不至于讓DOM操作變得卡頓),并且在操作單個(gè)DOM元素的時(shí)候,反而多了一道計(jì)算工序,會(huì)更慢。但也有人認(rèn)為基本上會(huì)用Vue.js開(kāi)發(fā)的都是頁(yè)面中內(nèi)容很多的元素,肯定操作的DOM量級(jí)普遍較大,平均一下還是比較劃算的。
9.我到底該怎么用Vue.js做單頁(yè)應(yīng)用開(kāi)發(fā)?說(shuō)了這么多,我還是不知道怎么用它做出一個(gè)像知乎那樣的頁(yè)面啊,到底怎么學(xué)它呢?
前面我們看了一個(gè)響應(yīng)式的數(shù)據(jù)綁定案例,那只是一個(gè)DEMO,而且也看不出有什么實(shí)際意義,離真正的單頁(yè)應(yīng)用程序還差得遠(yuǎn),到底怎么用它開(kāi)發(fā)真實(shí)的項(xiàng)目呢?
我的建議是,先把介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍。除了組件這個(gè)小節(jié)涉及到了很多晦澀難懂的名詞以外,前面幾章完全就是把Vue.js當(dāng)作一個(gè)模版引擎來(lái)用。
然后開(kāi)始學(xué)習(xí)ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對(duì)Node.js也要有所了解。
最后組件部分先大致看一遍,了解組件里面都有哪些概念之后,開(kāi)始看網(wǎng)上各種實(shí)戰(zhàn)視頻以及文章還有別人開(kāi)源的源代碼。
10.在前面你提到過(guò)好幾次ECMAScript,這是啥?ECMAScript聽(tīng)名字好像和JavaScript很像,難不成他們有什么千絲萬(wàn)縷的聯(lián)系?
沒(méi)錯(cuò)你猜對(duì)了,他們之間還真有著很深的聯(lián)系。
引用阮一峰老師的話:(ECMAScript 6入門(mén))
要講清楚這個(gè)問(wèn)題,需要回顧歷史。1996年11月,JavaScript 的創(chuàng)造者 Netscape 公司,決定將 JavaScript 提交給國(guó)際標(biāo)準(zhǔn)化組織ECMA,希望這種語(yǔ)言能夠成為國(guó)際標(biāo)準(zhǔn)。次年,ECMA 發(fā)布262號(hào)標(biāo)準(zhǔn)文件(ECMA-262)的第一版,規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn),并將這種語(yǔ)言稱為 ECMAScript,這個(gè)版本就是1.0版。該標(biāo)準(zhǔn)從一開(kāi)始就是針對(duì) JavaScript 語(yǔ)言制定的,但是之所以不叫 JavaScript,有兩個(gè)原因。一是商標(biāo),Java 是 Sun 公司的商標(biāo),根據(jù)授權(quán)協(xié)議,只有 Netscape 公司可以合法地使用 JavaScript 這個(gè)名字,且 JavaScript 本身也已經(jīng)被 Netscape 公司注冊(cè)為商標(biāo)。二是想體現(xiàn)這門(mén)語(yǔ)言的制定者是 ECMA,不是 Netscape,這樣有利于保證這門(mén)語(yǔ)言的開(kāi)放性和中立性。
因此,ECMAScript 和 JavaScript 的關(guān)系是,前者是后者的規(guī)格,后者是前者的一種實(shí)現(xiàn)(另外的 ECMAScript 方言還有 Jscript 和 ActionScript)。日常場(chǎng)合,這兩個(gè)詞是可以互換的。
而ECMAScript6就是新一代的JavaScript語(yǔ)言。
這里也強(qiáng)烈推薦大家學(xué)習(xí)ECMAScript6的時(shí)候參考這本書(shū)ECMAScript 6入門(mén)
11.我在學(xué)習(xí)Vue.js的時(shí)候老是聽(tīng)到Webpack,這是啥?Webpack是一個(gè)前端打包和構(gòu)建工具。如果你之前一直是手寫(xiě)HTML,CSS,JavaScript,并且通過(guò)link標(biāo)簽將CSS引入你的HTML文件,以及通過(guò)Script標(biāo)簽的src屬性引入外部的JS腳本,那么你肯定會(huì)對(duì)這個(gè)工具感到陌生。不要緊,我們先來(lái)了解一下為什么要用Webpack,然后帶著原因去學(xué)習(xí)就好了。
12.為什么要用Webpack前面說(shuō)了,做一個(gè)單頁(yè)應(yīng)用程序本身就相當(dāng)復(fù)雜,而且在做的時(shí)候肯定會(huì)使用到很多素材和別的第三方庫(kù),我們?cè)撊绾稳ス芾磉@些東西呢?
還有前面講到了Webpack是一個(gè)前端打包工具,前端代碼為什么要打包呢?因?yàn)閱雾?yè)應(yīng)用程序中用到很多素材,如果每一個(gè)素材都通過(guò)在HTML中以src屬性或者link來(lái)引入,那么請(qǐng)求一個(gè)頁(yè)面的時(shí)候,可能瀏覽器就要發(fā)起十多次請(qǐng)求,往往請(qǐng)求的這些資源都是一些腳本代碼或者很小的圖片,這些資源本身才幾k,下載連1秒都不需要,但是由于HTTP是應(yīng)用層協(xié)議,它的下層是TCP這個(gè)運(yùn)輸層協(xié)議,TCP的握手和揮手過(guò)程消耗的時(shí)間可能比下載資源本身還要長(zhǎng),所以需要把這些小文件全部打包成一個(gè)文件,這樣只要一次TCP握手和揮手的過(guò)程,就把多個(gè)資源給下載下來(lái)了,并且多個(gè)資源由于都是共享一個(gè)HTTP請(qǐng)求,所以head等部分也是共享的,相當(dāng)于形成了規(guī)模效應(yīng),讓網(wǎng)頁(yè)展現(xiàn)更快,用戶體驗(yàn)更好。
前面說(shuō)到Webpack還有構(gòu)建的功能,這就不得不提到了ECMAScript6這個(gè)新版本的JavaScript,但是現(xiàn)在國(guó)內(nèi)外還有很多人用著老版本的瀏覽器,這些瀏覽器并不支持ECMAScript6,那么我們的前端項(xiàng)目如何在這種瀏覽器上運(yùn)行呢?這就需要Webpack的Loader自動(dòng)載入一個(gè)轉(zhuǎn)換器來(lái)將我們寫(xiě)的ECMAScript6轉(zhuǎn)換成瀏覽器能支持的老版本JavaScript語(yǔ)言,這個(gè)轉(zhuǎn)換器的名字叫做babel,如果你以后聽(tīng)到或者看到了這個(gè)單詞,應(yīng)該要知道它就是一個(gè)ECMAScript6 to 老版本JavaScript的轉(zhuǎn)換器了。這也是Webpack的構(gòu)建功能。當(dāng)然對(duì)前端有更深入的同學(xué)還會(huì)知道Sass,Less,stylus之類(lèi)的CSS預(yù)處理器,我們也可以通過(guò)在Loader中編寫(xiě)特定的規(guī)則來(lái)實(shí)現(xiàn)自動(dòng)將這些CSS預(yù)處理語(yǔ)言轉(zhuǎn)換成普通瀏覽器能識(shí)別的CSS代碼。
開(kāi)頭的介紹提到了vue.js可以使用單文件組件開(kāi)發(fā)項(xiàng)目,其實(shí)也是通過(guò)Webpack將單文件組件中的模版,樣式以及JS轉(zhuǎn)換到主頁(yè)面中
當(dāng)然Webpack不止這點(diǎn)功能,它還可以通過(guò)安裝各種插件來(lái)擴(kuò)展,比如說(shuō)熱加載技術(shù),就是解放鍵盤(pán)的F5鍵。讓我們修改代碼,并且按Ctrl+S保存之后,瀏覽器頁(yè)面自動(dòng)刷新變化,不需要我們?nèi)ナ謩?dòng)刷新,還有一些插件可以自動(dòng)添加注釋?zhuān)詣?dòng)給CSS代碼加上一些瀏覽器內(nèi)核對(duì)CSS3兼容前綴,就像webkit-xxx之類(lèi)的一樣。
13.NPM和Node.js又是什么?它們是什么關(guān)系?首先講講Node.js。我們知道通常情況下,JavaScript的運(yùn)行環(huán)境都是瀏覽器,因此JavaScript的能力也就局限于瀏覽器能賦予它的權(quán)限了。比如說(shuō)讀寫(xiě)本地系統(tǒng)文件這種操作,一般情況下運(yùn)行在瀏覽器中的JavaScript代碼是沒(méi)有這個(gè)操作權(quán)限的。如果我們想用JavaScript寫(xiě)出一些能夠運(yùn)行在操作系統(tǒng)上的,能夠具有像PHP,JAVA之類(lèi)的編程語(yǔ)言具有的功能的程序該怎么辦呢?Node.js就解決了這個(gè)問(wèn)題。Node.js是一個(gè)服務(wù)端的JavaScript運(yùn)行環(huán)境,通過(guò)Node.js可以實(shí)現(xiàn)用JavaScript寫(xiě)?yīng)毩⒊绦颉O裎覀冎疤岬降腤ebpack就是Node.js寫(xiě)的,所以作為一個(gè)前端開(kāi)發(fā),即使你不用Node.js寫(xiě)?yīng)毩⒊绦颍驳门湟粋€(gè)Node.js運(yùn)行環(huán)境,畢竟很多前端工具都是使用它寫(xiě)的。
NPM是一個(gè)node.js的包管理器。我們?cè)趥鹘y(tǒng)開(kāi)發(fā)的時(shí)候,JQuery.js大多都是百度搜索,然后去官網(wǎng)下載,或者直接引入CDN資源,這種方法太過(guò)于麻煩。如果以后遇到其他的包,這個(gè)包的代碼本身可能還調(diào)用了其他的包(也稱這個(gè)包和其他的那幾個(gè)包存在依賴關(guān)系),那么我們要在自己的項(xiàng)目中引入一個(gè)包將變得十分困難。現(xiàn)在我們有了NPM這個(gè)包管理器,直接可以通過(guò)
npm install xxx包名稱
的方式引入它,比如說(shuō)
npm install vue
就自動(dòng)在當(dāng)前項(xiàng)目文件夾下導(dǎo)入了這個(gè)包,并且npm自動(dòng)下載好了vue這個(gè)包依賴的其他包。
至于有的人在按照網(wǎng)上的npm教程配置的時(shí)候踩坑了,發(fā)現(xiàn)下載速度很慢或者完全下載不了,那是因?yàn)槲覈?guó)有著眾所周知的原因,網(wǎng)上也有各種解決方法可以解決這個(gè)問(wèn)題,大家多善用搜索引擎。
前面提到了Webpack可以安裝各種插件來(lái)擴(kuò)展功能,其實(shí)也是通過(guò)這種方式擴(kuò)展。
如果你學(xué)過(guò)PHP的話,NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。
14.Vue-CLi又是啥?它是一個(gè)vue.js的腳手架工具。說(shuō)白了就是一個(gè)自動(dòng)幫你生成好項(xiàng)目目錄,配置好Webpack,以及各種依賴包的工具,它可以通過(guò)
npm install vue-cli -g
的方式安裝,后面的-g表示全局安裝的意思,意味著你可以打開(kāi)命令行之后直接通過(guò)vue命令調(diào)用它。
15.我該不該學(xué)Vue.js?現(xiàn)在Vue.js無(wú)論是發(fā)展勢(shì)頭還是作者支持還是很好的,而且它本身中文資料就比較多,教程也很多,現(xiàn)在隨隨便便打開(kāi)幾個(gè)和前端開(kāi)發(fā)有關(guān)的知乎專(zhuān)欄,基本上都能見(jiàn)到相關(guān)文章,社區(qū)也很活躍。
至于你該不該學(xué),取決于你自己,如果你當(dāng)前只是做做以內(nèi)容展示為主的項(xiàng)目,或者就是成天用各種CMS建站仿站,并且以后都不打算更換更好的工作,那么可以暫時(shí)不用學(xué)。如果你開(kāi)發(fā)的項(xiàng)目交互非常多,而且前后端開(kāi)發(fā)都對(duì)前后端分離有很清楚的認(rèn)識(shí),那么可以大膽的學(xué)習(xí),并且在實(shí)際項(xiàng)目中運(yùn)用。
16.Vue.js怎么火起來(lái)的?關(guān)于這個(gè)問(wèn)題,網(wǎng)上說(shuō)法很多,我自己認(rèn)為主要還是前些年大前端變革太快,而最近一年開(kāi)始Vue.js+Webpack這個(gè)組合開(kāi)始逐漸穩(wěn)定下來(lái)了,而且已經(jīng)有了很多中文資料。
對(duì)比它的競(jìng)爭(zhēng)對(duì)手AngularJS,新舊版本項(xiàng)目無(wú)法平滑升級(jí),變革太大讓用戶感覺(jué)不安穩(wěn)。
而React本身主流推薦用的是JSX,需要額外學(xué)習(xí)一門(mén)語(yǔ)法(什么?學(xué)Vue.js還要學(xué)ECMAScript6?現(xiàn)在ECMAScript6是趨勢(shì),并不是因?yàn)閂ue.js才要學(xué)的),并且React本身用的是render寫(xiě)法編寫(xiě)模版代碼,這讓很多用習(xí)慣了Smarty等后端模版引擎得人來(lái)使用感覺(jué)很不適應(yīng),現(xiàn)在看來(lái)React本身在中國(guó)一些論壇社區(qū)的火爆程度還是沒(méi)有Vue.js高。
當(dāng)然也并不是說(shuō)除了Vue.js以外其他框架都很差。像知乎新版也是用React開(kāi)發(fā)的,他還是有各自優(yōu)秀的地方大家可以深入學(xué)習(xí)之后做出自己的判斷。
17.我在很多地方還看到Vuex和Vue-route,它們又是什么?Vuex是vue的一個(gè)狀態(tài)管理器。用于集中管理一個(gè)單頁(yè)應(yīng)用程序中的各種狀態(tài)。
Vue-route是vue的一個(gè)前端路由器,這個(gè)路由器不是我們上網(wǎng)用的路由器,而是一個(gè)管理請(qǐng)求入口和頁(yè)面映射關(guān)系的東西。它可以實(shí)現(xiàn)對(duì)頁(yè)面局部進(jìn)行無(wú)刷新的替換,讓用戶感覺(jué)就像切換到了網(wǎng)頁(yè)一樣。
要講清楚這兩個(gè)東西,又得花費(fèi)大量篇幅,所以這里只是簡(jiǎn)單提一下,先學(xué)好vue.js本身才是最重要的。
18.我還在一些地方看到過(guò)Vue-resource和Axios,它們又是什么?我們?cè)趥鹘y(tǒng)的前后端不分離的開(kāi)發(fā)中,后端直接把數(shù)據(jù)通過(guò)模版引擎拼接進(jìn)了返回的HTML中。而現(xiàn)在做單頁(yè)應(yīng)用程序?qū)儆谇昂蠖朔蛛x開(kāi)發(fā),那么這個(gè)單頁(yè)應(yīng)用程序中的數(shù)據(jù)就得通過(guò)ajax的方式獲取,也要通過(guò)ajax的方式提交到后端。
在傳統(tǒng)開(kāi)發(fā)中我們都是通過(guò)xmlhttprequest手動(dòng)操作,或者通過(guò)JQuery的ajax方法來(lái)進(jìn)行數(shù)據(jù)提交獲取。
vue.js本身沒(méi)有封裝ajax操作庫(kù),所以我們要通過(guò)Vue-resource和Axios來(lái)進(jìn)行ajax操作,而因?yàn)榉N種原因,現(xiàn)在vue.js2.0已經(jīng)將axios作為官方推薦的ajax庫(kù)了。
19.我該學(xué)Vue.js2.0還是1.0呢?現(xiàn)在很多框架和語(yǔ)言都是學(xué)新不學(xué)舊(Python慢慢也變得如此),因此如果不是為了維護(hù)老舊項(xiàng)目,肯定推薦學(xué)Vue.js2.0。而且學(xué)會(huì)了Vue.js2.0,再去學(xué)習(xí)Vue.js1.0也不是什么難事。
20.寫(xiě)Vue.js用什么開(kāi)發(fā)工具和電腦呢?前端開(kāi)發(fā)基本上不需要太高端的電腦都能勝任,現(xiàn)在這個(gè)時(shí)代是臺(tái)電腦,裝個(gè)編輯器都可以做前端開(kāi)發(fā)的。
Vue.js的組件文件本質(zhì)上還是普通的代碼文件,所以各種編輯器配合一些語(yǔ)法檢查插件就足夠了。我自己用的是sublime text 3,安裝一些插件之后可以實(shí)現(xiàn).vue單文件組件高亮代碼以及各種自動(dòng)完成。Webstorm中也有類(lèi)似插件,大家可以在網(wǎng)上各種教學(xué)文章的指導(dǎo)下配置好環(huán)境。
結(jié)語(yǔ)可能包括我在內(nèi)的很多人在看到Vue.js那神奇的雙向綁定優(yōu)雅寫(xiě)法都會(huì)有一種非常驚艷,而看到中文文檔發(fā)布之后有種想立馬學(xué)習(xí)的沖動(dòng)。可惜大前端終究是大前端,如果一個(gè)對(duì)于前端各個(gè)方面沒(méi)有深入認(rèn)識(shí)就想著能一步登天,肯定對(duì)不起大前端的“大”字。原本看著只想學(xué)一個(gè)Vue.js,沒(méi)想到順帶把ECMAScript6,Webpack配置,ESLint配置,bable配置,npm使用,node.js語(yǔ)法,以后vue全家桶中的vuex,vue-route等等等等都學(xué)了一遍。前段時(shí)間網(wǎng)上也流傳出了一個(gè)職位叫做Webpack配置工程師,從這里也可以看出弄懂前端這個(gè)大雜燴確實(shí)不是那么容易。大家一起加油,有什么問(wèn)題也可以在評(píng)論區(qū)回復(fù),我會(huì)抽空補(bǔ)充在文章內(nèi)容中。謝謝各位的支持!~
轉(zhuǎn)載于:https://zhuanlan.zhihu.com/p/25659025
作者:昌維
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97546.html
摘要:是目前唯一一個(gè)支持同步調(diào)用的跨平臺(tái)年度上最多的個(gè)項(xiàng)目前端掘金年接近尾聲,在最近的幾篇文章中,會(huì)整理總結(jié)一些年度開(kāi)源項(xiàng)目。 JS 全棧教程 - 前端 - 掘金本課程是基于阮一峰的 js 全棧教程的視頻版本,免費(fèi)供大家觀看... 2016 年 10 個(gè)最佳的 CodePen 作品 - 前端 - 掘金說(shuō)到 CodePen,前端開(kāi)發(fā)者們肯定不會(huì)陌生。如果說(shuō) Dribbble 是設(shè)計(jì)師們聚集的圣...
摘要:封裝手寫(xiě)的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注:本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一,Chai.js 中會(huì)遇到很多異常處理...
摘要:封裝手寫(xiě)的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注:本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一,Chai.js 中會(huì)遇到很多異常處理...
摘要:特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯(cuò)誤的地方,還請(qǐng)斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會(huì)及時(shí)更新,平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
摘要:一團(tuán)隊(duì)組織網(wǎng)站說(shuō)明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì),代表作品,致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì),簡(jiǎn)稱,騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無(wú)限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說(shuō)明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì),代表作品WebQQ,致力于前端技術(shù)的研究 ISUX 騰...
閱讀 765·2019-08-29 16:32
閱讀 836·2019-08-29 12:31
閱讀 3208·2019-08-26 18:26
閱讀 3152·2019-08-26 12:20
閱讀 1728·2019-08-26 12:00
閱讀 3006·2019-08-26 10:58
閱讀 2811·2019-08-23 17:08
閱讀 2309·2019-08-23 16:32