Nuxt 3.1.0 正式發(fā)布

2023.01.31 廣東

大家好，我是Echa。

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

Nuxt 介紹

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

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

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

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

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

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

JavaScript framework

JavaScript框架帶來了反應(yīng)性和web組件，我們選擇Vue.js。

Webpack and Vite

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

Latest JavaScript syntax

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

Server side

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

Routing library

處理客戶端導(dǎo)航的路由庫，我們選擇 vue-router.

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

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

視圖引擎

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

自動化和約定

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

自動導(dǎo)入 — 文件系統(tǒng)路由和API層
數(shù)據(jù)獲取工具
零配置TypeScript支持
配置構(gòu)建工具

渲染模式

Nuxt提供了不同的渲染模式來適應(yīng)不同的用例:

通用渲染(服務(wù)器端渲染和水化)
客戶端渲染
完整的靜態(tài)站點(diǎn)生成
混合渲染(每路由緩存策略)

服務(wù)器引擎

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

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

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

生產(chǎn)就緒

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

模塊化

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

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

架構(gòu)

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
自動代碼分層
服務(wù)端渲染
強(qiáng)大的路由功能，支持異步數(shù)據(jù)
靜態(tài)文件服務(wù)
ES2015+ 語法支持
打包和壓縮 JS 和 CSS
HTML 頭部標(biāo)簽管理
支持各種樣式預(yù)處理器： SASS、LESS、 Stylus 等等

優(yōu)點(diǎn)

利于seo,一般購物類網(wǎng)站都需要seo優(yōu)化
首屏渲染速度更快原因是:服務(wù)端渲染只需要進(jìn)行一次網(wǎng)絡(luò)請求,而客戶端渲染需要先請求運(yùn)行所需文件,運(yùn)行之后再進(jìn)行網(wǎng)絡(luò)請求數(shù)據(jù),然后加載頁面

缺點(diǎn)

對于服務(wù)器要求比客戶端渲染高

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

Nuxt 3.0 基于 Vue 3，為 TypeScript 提供了 “一等公民” 支持，并進(jìn)行了一次徹底的重構(gòu)，對內(nèi)核進(jìn)行了精簡，速度更快，體驗(yàn)更好。

官方寫道，Nuxt 3.0 的 API 已完全穩(wěn)定，可用于生產(chǎn)環(huán)境。所有可組合項(xiàng)、文件系統(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)代瀏覽器為目標(biāo)的服務(wù)器部署和客戶端產(chǎn)物最多可縮小 75 倍
更快：基于 nitro 提供動態(tài)代碼分割能力，以優(yōu)化冷啟動性能
Hybrid：增量靜態(tài)生成和其他的高級功能現(xiàn)在都成為可能
Suspense：在任意組件和導(dǎo)航前后都可以獲取數(shù)據(jù)
Composition API：使用 Composition API 和 Nuxt 3 的 composables 實(shí)現(xiàn)真正的代碼復(fù)用
Nuxt CLI：沒有任何依賴，幫你輕松搭建項(xiàng)目和集成模塊
Nuxt Devtools：通過直接在瀏覽器中查看信息和快速修復(fù)實(shí)現(xiàn)更快地工作
Nuxt Kit：具有 Typescript 和跨版本兼容性的全新模塊開發(fā)
Webpack 5：更快的構(gòu)建時(shí)間和更小的包大小，無需配置
Vite：使用 Vite 作為打包工具，體驗(yàn)閃電般快速的 HMR
Vue 3：Vue 3 是你下一個(gè) Web 應(yīng)用程序的堅(jiān)實(shí)基礎(chǔ)
TypeScript：使用原生 TypeScript 和 ESM 構(gòu)建，無需額外步驟

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