Nuxt從入門到放棄

聽老大說，俺們公司之後要用Nuxt了，作服務端渲染，打算作個技術分享。因此吶……我打算提早玩一下，防止到時候聽的一臉懵逼 : |  

 

若是有幸看到這篇瞎寫的文檔的小夥伴，也想入門一下……

 

那你就來對啦！欸嘿嘿……跟着我來踩一踩這些坑吧！

 

一.  天才第一步，跟着官網輸

$ npx create-nuxt-app <項目名>

這行命令給咱安裝了一個腳手架工具，就像安裝vue-cli同樣，咱們能夠選擇作一些配置：

你們能夠一路回車，但這裏提個醒，在選擇你想要的Nuxt模式的時候，建議選擇 Universal 。

用nuxt的人多半是爲了解決SEO的問題，而Universal 和 Spa 的區別也剛好就在於對seo的實現存在差別。想了解更多的親能夠點下這裏  ：）

 

二.  興奮的喊：走你！

在第一步裏面，nuxt已經幫咱們安裝了全部依賴項，所以下一步是啓動項目:

$ npm run dev

而後這裏有個小坑（敲黑板注意了）！

咱們可能會遇到這個報錯。

咋辦呢？ 我自信的百度了一下並找到了前輩總結的緣由：

 

extract-text-webpack-plugin目前版本不支持webpack4。

 

解決方案也很簡單：使用extract-text-webpack-plugin的最新的beta版

$ npm install extract-text-webpack-plugin@next

 

當我以爲這樣就解決了的時候……

錯誤一毛同樣的又出如今我面前（小聲罵了一句百度）

而後通過一番研究，問題應該是我選擇了element做爲UI框架的緣由，在切換各個版本都未解決後，我決定把element從個人項目中幹掉！

而後……正常了！

看到了我努力一個小時獲得的結果：

翻譯一下中間的一行英文： 我簡單粗暴的nuxt.js項目。

聽起來牛逼閃閃的樣子。

三.  誒！目錄咋跟個人不同呢？

好吧，目錄這個玩意能夠帶咱們很好的瞭解一個項目，包括nuxt.  我先截個圖bia在這裏：

而後寫個註釋再bia一遍哈哈：

各位看官想要詳細瞭解他們的配置，請移步官網，畢竟這只是一篇流水帳哈哈……

四.  個人項目我說了算！

不少框架中，配置是其最有魅力但不多被衆多開發者注意的東西，由於這個東西一個不當心就報錯，報的莫名其妙。

實際上是咱們不夠了解它們。

當對每一項都調試一遍後，你就會嚼的這玩意真是太踏馬的牛逼啦！

好吧牛逼歸牛逼，咱們仍是要知道知道它咋這麼牛逼，SO！ 接下來看看他的配置文件： nuxt.config.js ！

 

……

……

……

 

好吧  我這裏貼出官網的配置地址，大夥兒看看吧，對不起你們我懶得複製了哈哈哈哈哈！

你卻是點我呀！

若是瞭解過webpack的配置的話，應該對這個不陌生的。

咱們能夠配置模式，環境變量，路由，根目錄，服務器實例變量等等你能想到的均可以在這裏配置，五臟六腑啥的，作咱們個性化的項目。想配啥，您說了算！

 

五.  等會？ 你把個人路由給幹掉了？

細心得玩家會注意到，nuxt項目中的路由目錄不見了。

孔子說的好啊，關上一扇窗戶就少一扇門什麼的…… 誒！咱們的路由跑哪裏去了呢？

答案是：自！動！生！成！

固然這個牛逼不是我吹的，是官網這麼說的：

 

 

牛逼不？ 智能不？

咱先說基礎的：

固然這屬於初級用法，像我們這個檔次的必須玩出點花兒來：

吶！ 動態的！哈哈  其實就是動態路由，聰明的你一眼就看出來了吧，那個:id? 參數，表示該路由是可選的，若是你想將它設置爲必選的路由，須要在 users/_id 目錄內建立一個 index.vue 文件。

 

這都不叫花兒，Nuxt.js 的炫酷之處在於可讓你在動態路由組件中定義參數校驗方法。

 

 想詳細瞭解的仍是移步官網哈哈！

嵌套路由就很好理解了，一看就懂的那種：

 

 

六.  Emmmm，中間件是個啥？

官網這麼說的：中間件容許您定義一個自定義函數運行在一個頁面或一組頁面渲染以前。

 

 未完待續……