【Nuxt系列文章】Nuxt3.4带来哪些新特性?
前言
大家好,我是刘明,十年创业老兵,开源技术爱好者。
2023年4月11日,Nuxt开发团队发布了Nuxt 3.4.0版本,而3.3.0版本发布日期是3月14日,也就是说,不到一个月Nuxt就发布了一个新的版本。频繁的版本更新,会导致很多童鞋询问:是否有必要升级? 我的答案是:
如果需要用到新版本的特性就升级,如果用不到就不要折腾了。
今天我们来看一下Nuxt3.4有哪些新特性。
特性一:支持View Transition API
首先要了解一下View Transition API.
View Transition API是Chrome 111及以上版本支持的实验性技术。View Transition API将让开发者可以简单更新DOM,在不同DOM状态之间产生动画转换,还能进一步改变DOM的内容,简化单页应用程序切换画面的开发工作。
在浏览器的支持上,主要浏览器中现在仅有Chrome 111及以上版本支持,Edge则还在开发中,Firefox和Safari则尚未支持。
开启方式
在nuxt.config.ts
文件中添加如下内容
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
特性二:简化开发者工具配置
如果有童鞋喜欢用Nuxt开发项目,那一定很熟悉它的配套开发者工具DevTools.
现在,开启DevTools非常简单,只需要在nuxt.config.ts
文件中添加如下内容
export default defineNuxtConfig({
devtools: true
})
这样配置后,如果你还没有安装DevTools,Nuxt会提醒你进行本地安装。
特性三:Layer开发改善
Layer是Nuxt3中的一个创新功能。估计很多童鞋还不熟悉Layer.
我们可以这样理解Layer:
Layer是一个Nuxt子项目,可以被Nuxt主项目引用。神奇的是,子项目开发方式和主项目开发方式几乎完全一样。
更多的Layer说明可以参考官方文档Layer部分
从Nuxt3.4开始,Layer开发过程中也可以使用~/~~/@/@@
等符号代替相对路径,这样使得Layer开发跟Nuxt开发更接近。
特性四:插件支持对象语法
在插件中支持对象语法可以更好的控制插件加载顺序和位置。
语法如下:
export default defineNuxtPlugin({
name: 'my-plugin',
enforce: 'pre', // or 'post'
async setup (nuxtApp) {
// this is the equivalent of a normal functional plugin
},
hooks: {
// You can directly register Nuxt app hooks here
'app:created'() {
const nuxtApp = useNuxtApp()
//
}
}
})
有童鞋可能会问到之前的插件是怎样的语法,这里我给一个例子
export default defineNuxtPlugin(nuxtApp => {
// now available on `nuxtApp.$injected`
nuxtApp.provide('injected', () => 'my injected function')
// You can alternatively use this format, which comes with automatic type support
return {
provide: {
injected: () => 'my injected function'
}
}
})
可以看到之前是函数语法,现在是对象语法。不管童鞋们是不是写过插件,从v3.4.0开始,我们都建议使用对象语法来书写。
特性五:常规性的依赖变化
每一次版本发布,Nuxt的依赖都可能会做一些版本提升,这次包括 Consola v3
和Nitropack v2.3.3
。
升级
Nuxt的升级非常简单,采用如下命令即可
npx nuxi upgrade --force
如果有童鞋全局安装了nuxi,则不需要前面的npx,只需要像下面这样写:
nuxi upgrade --force
结语
回到文章前言提到的问题,是不是要升级到Nuxt 3.4.0,就看童鞋们有没有使用到上面提到的这些特性,如果没有使用到,那就别折腾了,做一个轻松的程序员不是更好?不过,如果你想学习这些新特性,那就赶紧升级试一试吧!
- 点赞
- 收藏
- 关注作者
评论(0)