大家好，我是Echa。

好消息，2023年1月27日Nuxt官方正式發(fā)布v3.1.0版本。距離Nuxt v3.0正式版（2022年11月16日），只有短短72天時間。Nuxt開發(fā)團隊沒日沒夜的在維護迭代底層Bug，同時兼容其他底層擴張組件，小編在這里給他們點32個贊。

Nuxt 介紹

官網(wǎng)地址：https:///

在線演示：
https:///docs/examples/essentials/hello-world

Github：https://github.com/nuxt/nuxt

Nuxt 是使用簡便的 Web 框架，用于構建現(xiàn)代和高性能的 Web 應用，可以部署在任何運行 JavaScript 的平臺上。

Nuxt提供前端和后端功能，因此您可以專注于重要的事情:創(chuàng)建您的web應用程序。

為了理解什么是Nuxt，我們需要了解為了創(chuàng)建一個現(xiàn)代應用程序我們需要什么:

JavaScript framework

• JavaScript框架帶來了反應性和web組件，我們選擇Vue.js。

Webpack and Vite

• 一個在開發(fā)中支持熱模塊替換和在生產(chǎn)中捆綁您的代碼的捆綁器，我們同時支持webpack 5和Vite。

Latest JavaScript syntax

• 一個編譯器可以在支持舊瀏覽器的同時編寫最新的JavaScript語法，我們使用esbuild。

Server side

• 一個在開發(fā)中為你的應用服務的服務器，但也支持服務器端渲染或API路由，Nuxt使用h3部署的多功能性，如無服務器，工作者，Node.js和無與倫比的性能。

Routing library

• 處理客戶端導航的路由庫，我們選擇 vue-router.

這只是冰山一角，想象一下必須為你的項目設置所有這些，讓它工作，然后，隨著時間的推移維護它。自2016年10月以來，我們一直在這樣做，調優(yōu)所有配置，為任何Vue應用程序提供最佳的優(yōu)化和性能。

Nuxt處理了這一點，并提供了前端和后端功能，因此您可以專注于重要的事情:創(chuàng)建您的web應用程序。

視圖引擎

Nuxt使用Vue.js作為視圖引擎。所有Vue 3的功能都可以在Nuxt中使用。你可以在關鍵概念部分中閱讀關于Vue與Nuxt集成的細節(jié)。

自動化和約定

Nuxt使用約定和明確的目錄結構來自動化重復的任務，并允許開發(fā)人員專注于推送特性。配置文件仍然可以自定義和覆蓋其默認行為。

• 自動導入 — 文件系統(tǒng)路由和API層

• 數(shù)據(jù)獲取工具

• 零配置TypeScript支持

• 配置構建工具

渲染模式

Nuxt提供了不同的渲染模式來適應不同的用例:

• 通用渲染(服務器端渲染和水化)

• 客戶端渲染

• 完整的靜態(tài)站點生成

• 混合渲染(每路由緩存策略)

服務器引擎

Nuxt服務器引擎Nitro解鎖新的全棧功能。

在開發(fā)中，它使用Rollup和Node.js工作者進行服務器代碼和上下文隔離。它還通過讀取server/API/中的文件和從server/middleware/中的服務器中間件生成服務器API。

在生產(chǎn)中，Nitro將你的應用和服務器構建為一個通用的.output目錄。這個輸出很輕:從任何Node.js模塊(除了polyfills)中刪除。你可以在任何支持JavaScript的系統(tǒng)上部署這個輸出，從Node.js, less server, Workers, Edge-side渲染或純靜態(tài)。

生產(chǎn)就緒

Nuxt應用程序可以部署在Node或Deno服務器上，預呈現(xiàn)為托管在靜態(tài)環(huán)境中，或者部署到無服務器和邊緣提供程序。

模塊化

模塊系統(tǒng)允許通過自定義特性和與第三方服務的集成來擴展Nuxt。

發(fā)現(xiàn)關于模塊的更多信息。

架構

Nuxt由不同的 core packages組成:

• Core Engine: nuxt

• Bundlers: @nuxt/vite-builder and @nuxt/webpack-builder

• Command line interface: nuxi

• Server engine: nitro

• Development kit: @nuxt/kit

• Nuxt 2 Bridge: @nuxt/bridge

nuxt特性

• 基于 Vue.js

• 自動代碼分層

• 服務端渲染

• 強大的路由功能，支持異步數(shù)據(jù)

• 靜態(tài)文件服務

• ES2015+ 語法支持

• 打包和壓縮 JS 和 CSS

• HTML 頭部標簽管理

• 支持各種樣式預處理器： SASS、LESS、 Stylus 等等

優(yōu)點

• 利于seo,一般購物類網(wǎng)站都需要seo優(yōu)化

• 首屏渲染速度更快 原因是:服務端渲染只需要進行一次網(wǎng)絡請求,而客戶端渲染需要先請求運行所需文件,運行之后再進行網(wǎng)絡請求數(shù)據(jù),然后加載頁面

缺點

• 對于服務器要求比客戶端渲染高

小編帶著大家先回顧一下Nuxt v3.0正式版更新了哪些內容：

Nuxt 3.0 基于 Vue 3，為 TypeScript 提供了 “一等公民” 支持，并進行了一次徹底的重構，對內核進行了精簡，速度更快，體驗更好。

官方寫道，Nuxt 3.0 的 API 已完全穩(wěn)定，可用于生產(chǎn)環(huán)境。所有可組合項、文件系統(tǒng)約定和配置都確保向后兼容 Nuxt 3.0.0。Nuxt 3 目前支持 Node.js 14、16、18 和 19，建議使用最新的 Node.js LTS 版本，由于 Node.js 14 即將 EOL，開發(fā)者最好盡可能升級到最新的 18.x。

Nuxt 3.0 新特性包括：

• 更輕量：以現(xiàn)代瀏覽器為目標的服務器部署和客戶端產(chǎn)物最多可縮小 75 倍

• 更快：基于 nitro 提供動態(tài)代碼分割能力，以優(yōu)化冷啟動性能

• Hybrid：增量靜態(tài)生成和其他的高級功能現(xiàn)在都成為可能

• Suspense：在任意組件和導航前后都可以獲取數(shù)據(jù)

• Composition API：使用 Composition API 和 Nuxt 3 的 composables 實現(xiàn)真正的代碼復用

• Nuxt CLI：沒有任何依賴，幫你輕松搭建項目和集成模塊

• Nuxt Devtools：通過直接在瀏覽器中查看信息和快速修復實現(xiàn)更快地工作

• Nuxt Kit：具有 Typescript 和跨版本兼容性的全新模塊開發(fā)

• Webpack 5：更快的構建時間和更小的包大小，無需配置

• Vite：使用 Vite 作為打包工具，體驗閃電般快速的 HMR

• Vue 3：Vue 3 是你下一個 Web 應用程序的堅實基礎

• TypeScript：使用原生 TypeScript 和 ESM 構建，無需額外步驟

下面就來看看 Nuxt 3.1.0 都有哪些更新：

• 文檔改進

• 實驗性的島嶼組件和 服務器組件(目前不支持異步)

• 新增 API onNuxtReady，useNuxtData、useSeometa

• 實驗性的 config schema

• 升級到 Nitropack v2

• 升級到 Vite4 和 Rollup3

如下圖：