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

我心飞翔发布于 1年前分类：vue

引子

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

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

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

请各位耐心看完。

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

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

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

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

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

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

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

参考：Nuxt3 自动导入和 Nuxt3 TypeScript

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 渲染模式

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

参考：Nuxt3中Vue

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

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

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

参考：Nuxt3 和服务器引擎

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

参考：Nuxt3 模块