建站
咨詢
售后
建站咨詢
新聞中心
5 月 16 日，Nuxt 3.5.0 正式發(fā)布，它帶來了 Vue 3.3 版本、新的默認(rèn)設(shè)置、交互式服務(wù)端組件、類型化頁面、環(huán)境配置等。
Vue 3.3
Vue 3.3 已經(jīng)發(fā)布，具有許多令人興奮的特性，特別是在類型支持方面。包括：
- 宏中的導(dǎo)入和復(fù)雜類型支持
- 通用組件
- 更符合人體工程學(xué)的 defineEmits
- 使用 defineSlots 的類型插槽
- 響應(yīng)式 Props 解構(gòu)
- defineModel
- defineOptions
- 使用 toRef 和 toValue 實(shí)現(xiàn)更好的 getter 支持
- JSX 導(dǎo)入源支持
- 維護(hù)基礎(chǔ)設(shè)施改進(jìn)
Nitropack v2.4
Nuxt.js 團(tuán)隊(duì)一直致力于對(duì) Nitro 進(jìn)行大量改進(jìn)，這些改進(jìn)已經(jīng)在 Nitro v2.4 中實(shí)現(xiàn)——其中包含許多錯(cuò)誤修復(fù)、Cloudflare 模塊工作格式的更新、Vercel KV 支持等。
注意：如果需要部署到 Vercel 或 Netlify 并希望從增量靜態(tài)再生中受益，應(yīng)該更新路由規(guī)則：
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}豐富的 JSON 負(fù)載
現(xiàn)在默認(rèn)啟用豐富的 JSON 負(fù)載序列化。這既更快又允許序列化從 Nuxt 服務(wù)端傳遞到客戶端的有效載荷中的復(fù)雜對(duì)象（以及在為預(yù)渲染站點(diǎn)提取有效載荷數(shù)據(jù)時(shí)）。
現(xiàn)在這意味著開箱即用地支持各種豐富的 JS 類型：正則表達(dá)式、日期、Map 和 Set 以及 BigInt 以及 NuxtError，以及 Vue 特定的對(duì)象，如 ref、reactive、shallowRef 和 shallowReactive。
長期以來，由于序列化 Errors 和其他非 POJO 對(duì)象的問題，Nuxt 一直在使用自己的 devalue fork，但現(xiàn)在已經(jīng)過渡回原始版本。我們甚至可以使用新的對(duì)象語法Nuxt插件注冊(cè)自定義類型：
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '' && '_')
definePayloadReviver('BlinkingText', () => '')
}) 交互式服務(wù)端組件
這個(gè)功能應(yīng)該被認(rèn)為是高度實(shí)驗(yàn)性的，現(xiàn)在通過插槽支持服務(wù)端組件內(nèi)的交互式內(nèi)容。
環(huán)境配置
現(xiàn)在可以在 nuxt.config 中配置完全類型化的、按環(huán)境的覆蓋：
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})如果正在創(chuàng)作圖層，還可以使用 $meta 關(guān)鍵字來提供元數(shù)據(jù)，層的使用者可能會(huì)用到它。
完全類型化的頁面
通過與unplugin-vue-router的實(shí)驗(yàn)性整合，可以在Nuxt應(yīng)用中受益于完全類型化的路由。
開箱即用，這將啟用對(duì)navigateTo、
甚至可以通過使用const route = useRoute('route-name')在頁面內(nèi)獲取類型化的參數(shù)。
直接在nuxt.config中啟用此功能：
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})Bundler的模塊解析
現(xiàn)在，Nuxt內(nèi)部完全支持使用 bundler 策略進(jìn)行模塊解析。
如果可能，建議采用此方法。它具有對(duì)子路徑導(dǎo)出的類型支持，但與 Node16 解析相比，更準(zhǔn)確地匹配了諸如 Vite 和 Nuxt 這樣的構(gòu)建工具的行為。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})這將開啟TypeScript跟蹤Node子路徑導(dǎo)出的功能。例如，如果一個(gè)庫有一個(gè)像mylib/path這樣的子路徑導(dǎo)出，映射到mylib/dist/path.mjs，那么可以從mylib/dist/path.d.ts中引入此類型，而不需要庫作者創(chuàng)建mylib/path.d.ts。
分離的服務(wù)端類型
Nuxt 團(tuán)隊(duì)計(jì)劃通過為~/server目錄生成單獨(dú)的tsconfig.json來改善IDE中"nitro"和"vue"部分之間的清晰度。
可以通過添加一個(gè)額外的~/server/tsconfig.json并使用以下內(nèi)容來使用：
{
"extends": "../.nuxt/tsconfig.server.json"
}雖然現(xiàn)在在類型檢查 (nuxi typecheck) 時(shí)不會(huì)考慮這些值，但應(yīng)該在 IDE 中獲得更好的類型提示。
棄用內(nèi)容
雖然沒有為 Nuxt 2 中的build.extend鉤子提供類型或文檔，但一直在webpack 中調(diào)用它，現(xiàn)在明確地棄用了它，并將在將來的小版本中刪除它。
升級(jí)
建議運(yùn)行以下命令進(jìn)行升級(jí)：
nuxi upgrade --force這也將刷新 lockfile 文件，并確保從 Nuxt 依賴的其他依賴項(xiàng)中獲取更新，特別是在 unjs 生態(tài)系統(tǒng)中。
參考：https://nuxt.com/blog/v3-5
新聞標(biāo)題：Nuxt3.5正式發(fā)布，支持Vue3.3！
當(dāng)前鏈接：http://www.dlmjj.cn/article/dpspsgc.html
