Nuxt3正式发布!5个纬度全方位感受Nuxt3的魅力!

简介: 引子大家好,我 HoMeTown,在Nuxt3公测版过去的一年里,RC版中进行了各种性能改进与功能新增,11月16日,Nuxt3终于迎来了第一个稳定版本3.0的正式发布!🎉

引子

大家好,我 HoMeTown,在Nuxt3公测版过去的一年里,RC版中进行了各种性能改进与功能新增,11月16日,Nuxt3终于迎来了第一个稳定版本3.0的正式发布!🎉

网络异常,图片无法展示
|

就我个人而言,过去一年尝鲜了各种功能后,我依旧认为Nuxt3是一个非常好用且优秀的框架,同时在公司项目中进行了推进,落地了一些小项目。

Nuxt3 我觉得是一个比较通用和庞大的框架,很难用一个词来解释它的“优越”,今天,我将从5个纬度整理总结它的新引力。

请各位耐心看完。

注意:本文的内容是我个人的理解,并且尽量依据官网进行分析,但是依旧可能有理解偏差以及错误的地方,请海涵!

自动导入,全面支持TypeScript!更快更安全!

相比于其他的CLI与开发环境,Nuxt3最大的一个卖点可能是自动导入,极大程度的提高了开发的便捷性,同时支持TypeScript的开发,提高安全性。

defineComponent除了Vue3的Reactivity APIref等,Nuxt3中额外内置的函数和组件以及用户自定义的函数和组件都是自动导入的,可以自由调用。

与此同时,默认情况下支持 Tree-Shaking和动态引入,因此不会对构建大小或者性能产生负面影响。

Nuxt3无需自己动手设置就自动支持TypeScript,尤其是自动类型推断&类型检查系统非常的友好,不仅仅是导入函数还有自定义函数,在返回值这方面不需要特别去做类型的定义。

在Vue3 中,Tem标签上的变量和组件的props/emits也可以进行类型检查,所以在正常开发的情况下,不会出现任何引用错误!(VsCode和Volar也有很大功劳)

Nuxt3 通过自动导入TypeScript的协同方案,高标准实现了生产力和安全性的完美兼容!

参考:Nuxt3 自动导入Nuxt3 TypeScript

支持所有渲染模式和所有环境,SSR2More!

Nuxt.js有一个主要的特性是可以自己选择浏览器还是服务器渲染模式。

在服务端渲染的SSR(Server Side Rendering),在客户端渲染的CSR(Client Side Rendering),以及一个静态的SSG(Static Site Generation),Nuxt.js可以用一套代码生产多类型环境,而且模式的切换也非常简单。

除了基本的3种模式,Nuxt3 还支持一些无服务器环境,比如AWS Lambda。Nuxt3 也根据环境进行了预置方案,可以部署在Serverless、Workers等搭建成本比较高的环境中。

因为现在Nuxt3将其渲染规则描述为Hybrid Rendering,所以开发者可以进行灵活地配置与设置,比如在具体的每个页面之间切换 SSR 和 CSR渲染模式,以及仅针对 API 设置缓存期限和 ISR。

参考:Nuxt3 渲染模式

基于Vue3的高性能开发!

Nuxt.js是一个基于Vue.js的框架,Nuxt3全面拥抱Vue3,Vue3不仅引入了类似React Hooks的Composition API以及一些TypeScript支持,同时提升了性能,减小了bundle size,速度与其他优秀的框架基本不相上下。

参考:Nuxt3中Vue

高度集成Vite、Vue Router等实用库!

Vue3.0 发布的两年里,围绕Vuejs的生态也发生了很大的变化,技术方案以及库层出不穷,比如:

  • <scirpt setup> Vue3.2新增的Composition API的语法糖
  • Vite 以快为目标的新时代打包工具
  • Vitest 基于vite,运行速度快、兼容Jest的测试工具
  • vue-tsc&volar 大幅度提升Vue&TypeScript开发体验的CI检查工具&VsCode扩展工具
  • Pinia 更小、更简单、更快的Vuex状态管理的替代方案

Nuxt3默认采用Vite作为构建工具,构建与热加载速度非常快,script setupComponsition API的所有功能,无需配置,都可以自动导入。

同时,Nuxt3 继承了 Nuxt2的目录约定,并且支持多种渲染模式,所以Nux3最大的优势在于它的集成环境,可以充分利用Vue生态系统。

参考:Nuxt3服务器引擎

强大的生态库与模块!

Nuxt3可以让你自己去补充一些你觉得框架不够的核心功能,比如现有的@nuxt/image@nuxt/content等等。

参考:Nuxt3 模块

完结


目录
相关文章
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生国学自主学习平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生国学自主学习平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的一家运动鞋店的产品推广网站的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的一家运动鞋店的产品推广网站的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的河北任丘非物质文化遗产数字化传承附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的河北任丘非物质文化遗产数字化传承附带文章和源代码部署视频讲解等
19 0
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的鲸落文化线上体验馆的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的鲸落文化线上体验馆的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
前端开发 JavaScript 容器
前端炫技合集,简单的TODoList,简单的技术,实现不简单的效果
前端炫技合集,简单的TODoList,简单的技术,实现不简单的效果
97 0
|
前端开发 UED
「前端游戏开发体验」我用react实现网页游戏的全过程(包括规则设计)
用技术实现梦想,用梦想打开创意之门。游戏开发体验挺新奇的,我用react实现网页游戏的全过程(包括规则设计)。
677 1
|
存储 监控 JavaScript
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(二)
下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。
293 0
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(二)
|
缓存 JavaScript 前端开发
使用Vite快速构建前端Vue3项目,感受更轻更快的开发体验
vite是一种全新的前端构建工具,由于vite是一个基于原生ESM的开发服务器,多以它能给用户带来更轻更快的开发体验。本篇文章带大家使用vite构建VUE项目,用了之后就知道有多香~
239 0
使用Vite快速构建前端Vue3项目,感受更轻更快的开发体验
|
开发工具 git
【Vue3.0移动端项目--旅游网】-- 城市页面搭建
【Vue3.0移动端项目--旅游网】-- 城市页面搭建
191 0
【Vue3.0移动端项目--旅游网】-- 城市页面搭建
|
存储 缓存 监控
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(一)
下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。
205 0