快速上手?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ù)介紹~
