Nuxt.js 介紹

關(guān)于 Nuxt.js

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

Nuxt.js 是什么？

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

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

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

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

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

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

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

Nuxt.js 框架是如何運(yùn)作的？

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

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

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

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

特性

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

流程圖

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

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

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

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

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

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

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

如果你的項(xiàng)目有自己的 Web 服務(wù)器（例如用 Express.js 啟動(dòng)的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 的一個(gè)創(chuàng)新點(diǎn)，通過 nuxt generate 命令實(shí)現(xiàn)。

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

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

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

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

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

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

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

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

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

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

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

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