今日前言

Nuxt3 了，接下來後半篇鐵人賽都會以 Nuxt3 為主，一開始預計 Vue.js 的概念篇本來預計寫 10 天，不知不覺越寫越多 orz ...發現好像分享不完，後面 Nuxt 篇能寫到哪邊算哪邊，也感謝有追蹤的訂閱的朋友們，很開心能跟大家一起學習成長，讓我們繼續一起學習 Nuxt吧 。

Nuxt3

Nuxt 是什麼 ?
Nuxt 是基於 Vue.js 建立的框架，而 Nuxt3 是是 Nuxt.js 下一版本，基於 Vue3 的全新版本，支援 Composition API 及 TypeScript，也預設使用 Vite 構建，具有更快的構建速度、更小的體積，並提供靈活的配置及良好擴展性，也是一個 SSR 框架兼具 SEO 也可以享受 SPA (單頁式網站) 良好體驗，是不是很讚呢 !!

當然它還有其他優點，我們可以等等再來一一介紹

官方介紹版 :
易懂的Web框架
使用 Nuxt 自信的構建下一个 Vue.js 應用程序。一个在 MIT 许可下的開源框架，使 web 開發簡單而强大。

Nuxt 3 誕生日

• Vue 2.0 :2016年9月30日發布
• Nuxt.js : 2016年10月26日發布
• Nuxt 2 : 2018年09月(支援webpack4、ES module)
• Vue 3.0 : 2020年09月18日發布
• Vue 3.0 : 2022年02月07日默認版本
• Nuxt 3 : 2022年11月16日
  (支援TypeScript、Composition API、<script setup>語法糖、Vite)

全球最大的 Nuxt Nation 2022 在線會議於 2022年11月16日舉行，在此時發布了 Nuxt.js 3.0 的版本。

Nuxt 3 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的重寫，支援 Typescript ，經過了是兩年多的社區回饋、創新，提供給開發者 Vue 全新的開發體驗。

官方升級文件可以看到版本差異

Nuxt3 特色

一、優化使用者體驗 User Experience

• SEO & Web Vitals : 改善 SEO 搜尋
• 更好的優化、速度 :更輕量、更快速(Nitro)優化程式碼拆分、預先取得資料

想了解更詳細的優化舉例可以看這兩篇 : nuxt3构建优化、生成静态页面时的优化选项

二、優良的開發者體驗 Developer Experience

• 漸進式框架 : Nuxt 跟 Vue 一樣屬於漸進式框架，可以自行擴增，目錄易懂、好上手
• Webpack and Vite : 預設使用 Vite ，更小、更快，也可使用 Webpack
• Nuxt Devtools 開發者工具 : Vue devtools 進化版，超級好用的 Nuxt Devtools
• 自動化功能 : 自動導入(Auto Imports)、程式碼分割、分類、縮小、生產綑綁。

在踏上 Vue.js 的世界，為什麼選擇 Vue.js ?有介紹到漸進式框架概念，不熟悉的朋友可自行觀看

三、渲染模式

• 默認模式 : SPA + SSR 默認模式，改進 SEO ，同時擁有良好體驗
• 案需求渲染: 可切換不同渲染模式，並指定某頁面使用渲染模式
• 伺服器端/客戶端渲染

四、Server side

• Nitro Engine : 伺服器引擎採用Nitro，超快速開箱即用
• Server API : 透過 Nitro Engine 建置 Restful api
• 支援 Node.js

五、豐富的生態系統

• plugins 系統
• Nuxt 模組(modules)

一鍵安裝超方便，超豐富的 modules，良好的相容性

你準備好了嗎 ? 快來跟我們一起探索 Nuxt 3 !!

參考學習、資料

• Nuxt3 (官方)
• 翻譯中文官網 (非官方)
• ezdoc Nuxt

上面介紹哪麼多 Nuxt 好處那缺點呢 ?
Nuxt3 對 vue.js 非常友善，但是其實他背後運作原理很複雜，與 Vue.js 相同易上手、難精通，像是渲染方式運作須了解後端相關知識以及 SEO 優化等，再來他是零配置使用 TypeScript ，也需要花時間上手，所以學習上跟專案使用上也須評估，不過我相信再預計幾年使用人數會漸漸增加。