快速上手?jǐn)]Nuxt
? ? ? ?最近幾天在擼Vue的SSR框架Nuxt.js,先來說說為啥會(huì)出現(xiàn)這玩意。目前火熱的SPA單頁應(yīng)用雖然很多優(yōu)點(diǎn),但是美中不足的是首屏渲染可能比較慢,而且對SEO不是很友好,頁面加載出來就是一個(gè)空的div,啥內(nèi)容都抓不到。說到SEO,我想到我老哥公司項(xiàng)目官網(wǎng)就有專門的SEO專員做推廣,實(shí)際上原理就是基于meta標(biāo)簽的字段。我想說的是然并卵,在這個(gè)物欲橫流社會(huì)靠的是啥,錢,沒有什么是錢解決不了的事情,如果有,那就是更多的錢,百度,你懂的,你要是土豪砸個(gè)百來萬,分分鐘讓你上榜首!不吹不黑!好了,扯遠(yuǎn)了,偏題了,哈哈。
? ? ? ? 好了,言歸正傳。說說Nuxt,這玩意就是解決我上面說的兩個(gè)問題,就是把頁面在服務(wù)端提前渲染好了直接返給客戶端,這樣客戶端就不用再耗時(shí)請求數(shù)據(jù)了。首屏加載體驗(yàn)更快,當(dāng)然SPA可以用路由懶加載實(shí)現(xiàn)優(yōu)化。接下來就簡單介紹一下吧,Nuxt的官網(wǎng),https://nuxtjs.org/,文檔很親切,中文翻譯的好。
? ? ? ?我們知道如果不借助Nuxt也可以實(shí)現(xiàn)服務(wù)端渲染,但是要經(jīng)過一個(gè)很繁瑣復(fù)雜的webpack配置,于是Vue社區(qū)的大佬們就整出了個(gè)Nuxt,在此我想說的就是其實(shí)Vue的周邊生態(tài)近年來也是在蓬勃發(fā)展雖然和React還是有一定的差距,相信Vue會(huì)越來越好。當(dāng)然以后我有時(shí)間也會(huì)去研究研究如何不用Nuxt純手?jǐn)]SSR,了解下服務(wù)端渲染的原理和流程。
? ? ?上手開擼吧!
? ? 首先new一個(gè)文件夾取名隨意,Mac的話擼Linux命令,逼格高,cd到你喜歡的路徑,mkdir [name],我取的是Nuxt,顧名思義嘛,然后就是安裝,這里你嫌麻煩的話直接去官網(wǎng)下zip包吧,或者用vue-cli裝,vue-cli怎么裝也說下吧,npm i vue-cli -g記得加-g全局安裝,install可以簡寫成i,沒辦法,就是懶。<project-name>可以不寫,默認(rèn)就是當(dāng)前文件夾下。


然后就可以一頓騷操作了。我一路按Y,裝了有你的Nuxt,你說你好累,已無法再寫代碼~哈哈。npm會(huì)自動(dòng)幫你拉Nuxt模板,然后裝完了。

按提示,npm i裝下依賴,看見沒,簡寫就是爽,還可以提升逼格。少了n,s,t,a,l,l足足六個(gè)字母啊,省事又省力,或者你覺得逼格不夠可以上yarn,這個(gè)逼我沒裝過留給大家了。接著npm run dev

訪問http://localhost:3000,當(dāng)然這些主機(jī)和端口都可以在package.json里配置,下回詳細(xì)說。

畫面太美,亮瞎我的眼,好了,一個(gè)nuxt應(yīng)用就起來了。接下來我們右鍵查看源碼。

畫面更美了,看見沒,一個(gè)完整的html頁面來對比下SPA,沒有對比沒有傷害...

oh,holy shit ! 184 : 16, 好了由此可以推測,今年歐冠利物浦是冠軍,nba總決賽是火箭VS綠軍,好了,奶夠了。
下面看下項(xiàng)目目錄結(jié)構(gòu)

和SPA挺像,最關(guān)鍵的就是.nuxt的目錄,實(shí)現(xiàn)ssr的根本,里面代碼我也看不是很懂,先學(xué)會(huì)用唄,比如后面我們請求數(shù)據(jù)會(huì)用到的Nuxt幫我們封裝好的AsyncData方法,Nuxt已經(jīng)幫開發(fā)者自動(dòng)集成了路由,非常方便,基于vue-router,在.nuxt目錄下的router.js可以看到,也集成熱加載,真的是很好用,你只需按照開發(fā)SPA的方式去寫就好了,其他的無需關(guān)心,Nuxt都幫你做好了。人間大愛啊,今天就先到這吧,下回繼續(xù)介紹~