Nuxt.js 介紹

關(guān)于 Nuxt.js

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

Nuxt.js 是什么？

Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。

通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。

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

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

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

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

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

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

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

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

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

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

特性

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

流程圖

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

服務(wù)端渲染(通過SSR)

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

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

單頁應(yīng)用程序 (SPA)

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

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

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

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

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

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

例如，以下文件結(jié)構(gòu)：

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

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

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

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

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

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

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

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

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

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