關于 Nuxt.js

2016 年 10 月 25 日，zeit.co 背后的團隊對外發(fā)布了 Next.js，一個 React 的服務端渲染應用框架。幾小時后，與 Next.js 異曲同工，一個基于 Vue.js 的服務端渲染應用框架應運而生，我們稱之為：Nuxt.js。

Nuxt.js 是什么？

Nuxt.js 是一個基于 Vue.js 的通用應用框架。

通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

我們的目標是創(chuàng)建一個靈活的應用框架，你可以基于它初始化新項目的基礎結構代碼，或者在已有 Node.js 項目中使用 Nuxt.js。

Nuxt.js 預設了利用 Vue.js 開發(fā)服務端渲染的應用所需要的各種配置。

除此之外，我們還提供了一種命令叫：nuxt generate ，為基于 Vue.js 的應用提供生成對應的靜態(tài)站點的功能。

我們相信這個命令所提供的功能，是向開發(fā)集成各種微服務（Microservices）的 Web 應用邁開的新一步。

作為框架，Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性，例如異步數(shù)據(jù)加載、中間件支持、布局支持等。

Nuxt.js 框架是如何運作的？

Nuxt.js 集成了以下組件/框架，用于開發(fā)完整而強大的 Web 應用：

• Vue 2
• Vue-Router
• Vuex (當配置了 Vuex 狀態(tài)樹配置項 時才會引入)
• Vue 服務器端渲染 (排除使用 mode: 'spa')
• Vue-Meta

壓縮并 gzip 后，總代碼大小為：57kb （如果使用了 Vuex 特性的話為 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構建工作（如打包、代碼分層、壓縮等等）。

特性

• 基于 Vue.js
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步數(shù)據(jù)
• 靜態(tài)文件服務
• ES2015+ 語法支持
• 打包和壓縮 JS 和 CSS
• HTML 頭部標簽管理
• 本地開發(fā)支持熱加載
• 集成 ESLint
• 支持各種樣式預處理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

流程圖

下圖闡述了 Nuxt.js 應用一個完整的服務器請求到渲染（或用戶通過 <nuxt-link> 切換路由渲染頁面）的流程：

服務端渲染(通過SSR)

您可以使用Nuxt.js作為框架來處理項目的所有UI呈現(xiàn)。

啟動時nuxt，它將啟動具有熱更新加載的開發(fā)服務器，并且Vue 服務器端渲染配置為自動為服務器呈現(xiàn)應用程序。

單頁應用程序 (SPA)

如果您不想使用服務器端渲染或需要應用程序提供靜態(tài)托管，則可以使用 nuxt --spa 命令即可使用 SPA 模式。 它為您提供了強大的SPA部署機制，無需使用 Node.js 來運行應用程序或任何特殊的服務器端處理。

可以查看 Nuxt.js 提供的各種 命令 來了解更多相關使用信息。

如果你的項目有自己的 Web 服務器（例如用 Express.js 啟動的Web服務），你仍然可以將 Nuxt.js 當作是中間件來使用，負責UI渲染部分的功能。在開發(fā)通用的 Web 應用過程中，Nuxt.js 是可插拔的，沒有太多的限制，可通過 開發(fā)編碼中使用Nuxt.js 了解更多的信息。

靜態(tài)化 (預渲染)

支持 Vue.js 應用的靜態(tài)化算是 Nuxt.js 的一個創(chuàng)新點，通過 nuxt generate 命令實現(xiàn)。

該命令依據(jù)應用的路由配置將每一個路由靜態(tài)化成為對應的 HTML 文件。

例如，以下文件結構：

-| pages/
----| about.vue
----| index.vue

靜態(tài)化后變成：

-| dist/
----| about/
------| index.html
----| index.html

靜態(tài)化可以讓你在任何一個靜態(tài)站點服務商托管你的Web應用。

Nuxt.js 的官網(wǎng)就是一個絕佳的例子, 它靜態(tài)化后托管在 Netlify 上，也可以參考我們的 源代碼 。

我們不希望每次更新部署 @nuxt/docs 倉庫 的時候都要手工執(zhí)行 nuxt generate 命令生成靜態(tài)文件，它會觸發(fā) Netlify 的鉤子應用：

1. 克隆 nuxtjs.org repository
2. 使用 npm install 命令安裝依賴
3. 運行 npm run generate
4. 生成 dist 目錄

我們現(xiàn)在就有了一個 無服務端的自動靜態(tài)化的Web應用 :)

我們進一步考慮下電商應用的場景，利用 nuxt generate，是不是可以將應用靜態(tài)化后部署在 CDN 服務器，每當一個商品的庫存發(fā)生變化時，就重新靜態(tài)化下，更新下商品的庫存。但是如果用戶訪問的時候恰巧更新了呢？我們可以通過調用電商的 API ，保證用戶訪問的是最新的數(shù)據(jù)。這樣相對于傳統(tǒng)的電商應用來說，這種靜態(tài)化的方案可以大大節(jié)省服務器的資源。

查看 如何在Netlify上部署？ 來獲取更多相關信息。