如果你是一個Vue開發者，可能你聽說過Nuxt.js。但是你可能不太知道關於它的所有炒作。你可能會問，為什麼我要在一個框架裡面再用一個框架，Vue已經讓開發JavaScript應用變得很容易了，Nuxt.js背後的想法是什麼？
這篇文章，我們將講述為什麼要在你的下一個項目中使用Nuxt的10個原因。
Nuxt.js 是什麼?
Nuxt.js是一個更高級的框架，它構建在Vue之上。 它簡化了通用或單頁Vue應用程序的開發。
Nuxt.js抽象出服務器和客戶端代碼分發的細節，以便您可以專注於應用程序開發。 Nuxt的目標是讓它足夠靈活，可以作為主要的項目基礎使用。 由於大部分Nuxt在開發階段都會發生，因此只需要少量的額外千字節被添加到JavaScript文件中，您就可以獲得很多功能。
讓我們來探索一下為什麼你需要考慮在你的下個Vue項目中要使用Nuxt的原因。
1. 輕鬆創建通用應用程序
Nuxt.js的一個最大的賣點就是創建通用應用程序從未如此簡單
什麼是一個通用應用程序?
一個通用應用程序用於描述可在客戶端和服務器端執行的JavaScript代碼。很多現代的JavaScript框架，比如說Vue，旨在創建單頁面應用(SPAs)，在傳統網站上使用SPA有很多好處，比如說，您可以構建快速更新且運行快速的用戶界面。 但是，SPA還具有諸如加載時間長的缺點，並且谷歌正在與他們鬥爭，因為頁面上最初沒有內容用於搜索引擎優化目的。 所有的內容都是在事後用JavaScript生成的。
一個通用的應用程序是關於有一個SPA，但不是有一個空白的index.html頁面，而是在Web服務器上預加載應用程序，併發送渲染的HTML頁面作為對每條路線的瀏覽器請求的響應，以加快加載 並通過使Google更容易抓取網頁來改進SEO。
Nuxt.js讓你寫一個通用應用程序更加簡單
構建通用應用程序可能很乏味，因為您必須在服務器端和客戶端都進行大量配置。
這是Nuxt.js旨在解決Vue應用程序的問題。 Nuxt.js使得在客戶端和服務器之間共享代碼變得簡單，因此您可以專注於應用程序的邏輯。
Nuxt.js允許您訪問組件上的isServer和isClient等屬性（https://nuxtjs.org/api/context/)，以便您可以輕鬆決定是在客戶端還是在服務器上呈現某些內容。 還有一些特殊的組件，如no-ssr組件(https://nuxtjs.org/api/components-no-ssr/)， 用於故意阻止組件在服務器端呈現。
最後，Nuxt使您可以訪問組件內部的[asyncData方法]（https://nuxtjs.org/api/）， 您可以使用它來獲取數據並在服務器端渲染數據。
這是Nuxt如何幫助您創建通用應用程序的冰山一角。 [點擊此處]（https://nuxtjs.org/guide） 瞭解更多關於Nuxt提供的渲染Universal應用程序的信息。
2. 靜態渲染您的Vue應用程序，並獲得通用應用程序的所有優勢，而無需服務器
Nuxt最大的創新在於它的nuxt generate命令。 該命令會生成一個完全靜態的網站版本。 它會為您的每條路由生成HTML，並將其放入其自己的文件中。 例如，如果您有以下頁面（Nuxt的路由術語）：
-| pages/----| about.vue----| index.vue
Nuxt將會為你生成一下文件結構：
-| dist/----| about/------| index.html----| index.html
這樣做的好處與通用應用程序的優點非常相似。 有標記可以使網頁更快加載，並幫助搜索引擎和社交媒體抓取工具抓取網站。
不同之處在於你不再需要服務器。 一切都在開發階段產生。
它功能強大，因為您可以在不需要服務器的情況下獲得通用渲染的好處。 您可以將您的應用程序託管在GitHub Pages或Amazon S3上。
瞭解關於更多 靜態生成 (預渲染) 部分在Nuxt.js文檔
3. 獲取自動代碼分割（預渲染頁面）
Nuxt.js能夠使用特殊的Webpack配置生成您的網站的靜態版本。
對於靜態生成的每個路由（頁面），路由也會獲取自己的JavaScript文件，只需運行該路由所需的代碼即可。
這對速度確實有幫助，因為它可以保持JavaScript文件的大小相對於整個應用程序的大小。
4. 通過命令行使用入門模板進行設置
Nuxt.js提供了一個名為starter-template的入門模板，它為您提供所需的所有腳手架，以便您可以開始使用具有良好文件夾結構的項目。
確保你已經安裝了vue-cli，然後運行如下命令：
$ vue init nuxt-community/starter-template
從那裡只需cd進入應用程序並運行npm install，這應該很容易。
點擊這兒 （https://nuxtjs.org/guide/installation）瞭解更多關於使用命令行設置項目的信息。
5. 獲得優秀的默認項目結構
在許多小Vue應用程序中，您最終會像在多個文件中那樣管理代碼的結構。 默認的Nuxt.js應用程序結構為您以可理解的方式組織應用程序提供了一個很好的起點。
以下是您設置的幾個主要目錄：
- 組件 — 一個組織你單獨的Vue組件文件夾。
- 佈局 — 包含主要應用程序佈局的文件夾.
- 頁面 —一個文件夾來包含您的應用程序的路由。 Nuxt.js讀取此目錄中的所有.vue文件並創建應用程序路由器。
- 存儲 - 一個包含所有應用程序的Vuex存儲文件的文件夾。
點擊這兒（https://nuxtjs.org/guide/directory-structure） 以瞭解更多關於Nuxt.js為您提供的所有文件夾結構。
6. 輕鬆設置您的路由之間的轉換
Vue有一個包裝器
如果您需要對Vue的
Nuxt.js以這樣的方式設置路由，即每個頁面都包裝在
點擊這兒（https://nuxtjs.org/examples/routes-transitions/）查看Nuxt.js如何幫助您進行頁面轉換的示例。
7. 輕鬆編寫單個文件組件
在許多小型的Vue項目中，組件是使用Vue.component定義的，然後是新的Vue({ el: ‘#container’ })來定位每個頁面主體中的容器元素。
這適用於JavaScript僅用於增強某些視圖的小型項目。 但是在更大的項目中，它可能變得難以管理。
所有這些問題都可以通過帶有.vue擴展名的單文件組件來解決。 為了使用它們，你必須使用Webpack和Babel等工具來建立一個構建過程。
這裡是一個單文件.vue組件的例子
Nuxt.js是為Webpack預先配置的，因此您可以開始使用.vue文件，而無需親自設置複雜的構建過程。
要了解有關單個文件組件的更多信息，請訪問Vue文檔點擊這兒.
8. 無需額外工作即可獲得ES6 / ES7編譯
除Webpack之外，Nuxt.js還預裝了Babel。 Babel處理將最新的JavaScript版本（如ES6和ES7）編譯為可在舊版瀏覽器上運行的JavaScript。
Nuxt.js為您設置了Babel，因此所有.vue文件和您在
閱讀更多 程序弈說 的文章
