關(guān)于 Nuxt.js

2016 年 10 月 25 日，zeit.co?背后的團(tuán)隊(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)用框架。

通過對客戶端/服務(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)用提供生成對應(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ù)器請求到渲染（或用戶通過?<nuxt-link>?切換路由渲染頁面）的流程：

?

服務(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ī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)化成為對應(yīng)的 HTML 文件。

使用Nuxt.js生成靜態(tài)站點(diǎn)

了解如何生成靜態(tài)站點(diǎn)(預(yù)渲染)用來提高性能和搜索引擎優(yōu)化(SEO)，同時(shí)減少站點(diǎn)托管成本。

由VueSchool制作視頻課程，用于支持Nuxt.js開發(fā)

例如，以下文件結(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 倉庫?的時(shí)候都要手工執(zhí)行?nuxt generate?命令生成靜態(tài)文件，它會(huì)觸發(fā) Netlify 的鉤子應(yīng)用：

克隆?nuxtjs.org repository

使用?npm install?命令安裝依賴

運(yùn)行?npm run generate

生成?dist?目錄

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

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

總結(jié)

以上是生活随笔為你收集整理的关于 Nuxt.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。