關于 Nuxt.js

?

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

Nuxt.js 是什么？

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

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

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

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

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

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

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

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

?

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

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

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

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

特性

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

流程圖

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

服務端渲染(通過SSR)

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

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

單頁應用程序 (SPA)

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

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

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

靜態化 (預渲染)

支持 Vue.js 應用的靜態化算是 Nuxt.js 的一個創新點，通過?nuxt generate?命令實現。

該命令依據應用的路由配置將每一個路由靜態化成為對應的 HTML 文件。

使用Nuxt.js生成靜態站點

了解如何生成靜態站點(預渲染)用來提高性能和搜索引擎優化(SEO)，同時減少站點托管成本。

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

例如，以下文件結構：

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

靜態化后變成：

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

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

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

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

克隆?nuxtjs.org repository

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

運行?npm run generate

生成?dist?目錄

我們現在就有了一個?無服務端的自動靜態化的Web應用?:)

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

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

總結

以上是生活随笔為你收集整理的NUXT 入门第一课： 关于 Nuxt.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。