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)而生，我們稱(chēng)之為：Nuxt.js。

Nuxt.js 是什么？

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

通過(guò)對(duì)客戶(hù)端/服務(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 開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。

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

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

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

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

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

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

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

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

特性

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

流程圖

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

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

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

啟動(dòng)時(shí)nuxt，它將啟動(dòng)具有熱更新加載的開(kāi)發(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ī)制，無(wú)需使用 Node.js 來(lái)運(yùn)行應(yīng)用程序或任何特殊的服務(wù)器端處理。

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

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

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

支持 Vue.js 應(yīng)用的靜態(tài)化算是 Nuxt.js 的一個(gè)創(chuàng)新點(diǎn)，通過(guò) 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 命令安裝依賴(lài)
3. 運(yùn)行 npm run generate
4. 生成 dist 目錄

我們現(xiàn)在就有了一個(gè) 無(wú)服務(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ù)存。但是如果用戶(hù)訪(fǎng)問(wèn)的時(shí)候恰巧更新了呢？我們可以通過(guò)調(diào)用電商的 API ，保證用戶(hù)訪(fǎng)問(wèn)的是最新的數(shù)據(jù)。這樣相對(duì)于傳統(tǒng)的電商應(yīng)用來(lái)說(shuō)，這種靜態(tài)化的方案可以大大節(jié)省服務(wù)器的資源。

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