Nuxt DevTools

https://www.toutiao.com/article/7221714965026193931/

好消息，2023年4月11号Nuxt官方正式发布v3.4版本。距离Nuxt v3.3.0正式版（2023年3月14日），详细请见这篇文章：Nuxt 3.3 正式发布，相距只有短短28天时间。小编这一路来一直关注着Nuxt，一步一个脚印，茁壮成长。Nuxt开发团队实力非凡，为了抢占前端市场，也是拼了命的没日没夜的快速迭代更新，小编相信Nuxt会越做越完善，Nuxt 研发团队会做越大。为啥这么说呢？请继续往下看

前一段时间Nuxt官方研发团队，正在打造Nuxt 下的生态。隆重推出了Nuxt DevTools。

Nuxt DevTools是一个可视化工具，可以帮助您理解Nuxt应用程序，并进一步改善开发人员体验。它的创建旨在为Nuxt和您的应用程序提供更好的透明度，发现性能瓶颈，并帮助您管理应用程序和配置。

Nuxt DevTools 正式发布 ，有兴趣的友友可以去看看，有助于Vue 开发。

具体如下图：

今天就继续给友友们详细讲解Nuxt v3.4 更新了哪些内容。

全文大纲
Nuxt 介绍
如何从Vue 到 Nuxt ？
为什么要使用 Nuxt？
Nuxt 详细概述
Nuxt 的经典案例
详解 Nuxt 3.4 更新重点
Nuxt 介绍
官网：https://nuxt.com/

Github：https://github.com/nuxt/nuxt

在Nuxt官方网站有一句这样的话：Nuxt.js预设了使您开发Vue.js应用程序所需的所有配置。Nuxt是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础框架的抽象组织，Nuxt主要关注的是应用的ui渲染。

通过上面的这些介绍可以简单的得出：

Nuxt不仅仅用于服务端渲染也可以用于SPA应用的开发
利用Nuxt提供的项目结构、异步数据加载，中间件的支持，布局等特性可大幅提升开发效率
Nuxt可用于网站静态化，可以使用命令将整个网页打包成静态页面，使SEO更加友好。
为了让大家更理解理解Nuxt，开发者需要了解为了创建一个现代应用程序需要什么:

JavaScript framework
JavaScript框架带来了反应性和web组件，Nuxt官方选择Vue.js。

Webpack and Vite
一个在开发中支持热模块替换和在生产中捆绑您的代码的捆绑器，我们同时支持webpack 5和Vite。

Latest JavaScript syntax
一个编译器可以在支持旧浏览器的同时编写最新的JavaScript语法，我们使用esbuild。

Server side
一个在开发中为你的应用服务的服务器，但也支持服务器端渲染或API路由，Nuxt使用h3部署的多功能性，如无服务器，工作者，Node.js和无与伦比的性能。

Routing library
处理客户端导航的路由库，Nuxt官方选择 vue-router.

这只是冰山一角，想象一下必须为你的项目设置所有这些，让它工作，然后，随着时间的推移维护它。自2016年10月以来，Nuxt官方一直在这样做，调优所有配置，为任何Vue应用程序提供最佳的优化和性能。

Nuxt处理了这一点，并提供了前端和后端功能，因此您可以专注于重要的事情:创建您的web应用程序。

Nuxt.js 特性

基于Vue.js Vue、Vue Router、Vuex、Vue SSR自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
EcmaScript6和EcmaScript7的语法支持
打包和压缩JavaScript和Css
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预编译器SASS、LESS等等
支持HTTP/2推送
nuxt自己集成了vuex，所以不需要安装，在/store目录下新建index.js即可使用
如下图：

nuxt 官网

如何从Vue 到 Nuxt ？
Nuxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。但是，如果您希望开发一个经典的（或标准的/传统的）SPA，它只在客户端执行，您可能需要考虑使用香草 VUE。

单页应用（SPA）

Nuxt 是在 Vue 之上创建的，具有一些额外的功能，如异步数据、中间件、布局、模块和插件，这些功能先在服务器端执行应用，然后在客户端执行应用。这意味着该应用的渲染速度通常比传统的服务器端（或多页）应用快。

Nuxt 与以下软件包一起预安装，因此您无需安装它们，而您可以在标准 Vue 应用中进行安装：

Vue（https://vuejs.org/ ）
Vue 路由（https://router.vuejs.org/ ）
Vuex（https://vuex.vuejs.org/ ）
Vue 服务器渲染器（https://ssr.vuejs.org/ ）
Vue 元（https://vue-meta.nuxtjs.org/ ）
除此之外，Nuxt 还使用 webpack 和 Babel 编译代码，并将其与以下 webpack 加载程序捆绑在一起：

Vue 加载器（https://vue-loader.vuejs.org/ ）
巴别塔装载机（https://webpack.js.org/loaders/babel-loader/ ）
简而言之，webpack 是一个模块绑定器，可以绑定 JavaScript 应用中的所有脚本、样式、资产和图像，而 Babel 是一个 JavaScript 编译器，可以将下一代 JavaScript（ES2015+）编译或传输到与浏览器兼容的 JavaScript（ES5），以便您可以在当前浏览器上运行代码。

为什么要使用 Nuxt？
Nuxt 等框架的存在是因为传统 SPA 的缺点和多页应用（MPAs的服务器端呈现）。我们可以将 Nuxt 视为服务器端渲染 MPA 和传统 SPA 的混合体。因此，它被称为“普遍的”或“同构的”。因此，能够进行服务器端渲染是 Nuxt 的定义特性。

视图引擎

Nuxt使用Vue.js作为视图引擎。所有Vue 3的功能都可以在Nuxt中使用。你可以在关键概念部分中阅读关于Vue与Nuxt集成的细节。

自动化和约定

Nuxt使用约定和明确的目录结构来自动化重复的任务，并允许开发人员专注于推送特性。配置文件仍然可以自定义和覆盖其默认行为。

自动导入 — 文件系统路由和API层
数据获取工具
零配置TypeScript支持
配置构建工具
渲染模式

Nuxt提供了不同的渲染模式来适应不同的用例:

通用渲染(服务器端渲染和水化)
客户端渲染
完整的静态站点生成
混合渲染(每路由缓存策略)
如下图：

Nuxt 渲染流程

服务器引擎

Nuxt服务器引擎Nitro解锁新的全栈功能。

在开发中，它使用Rollup和Node.js工作者进行服务器代码和上下文隔离。

它还通过读取server/API/中的文件和从server/middleware/中的服务器中间件生成服务器API。

在生产中，Nitro将你的应用和服务器构建为一个通用的.output目录。这个输出很轻:从任何Node.js模块(除了polyfills)中删除。你可以在任何支持JavaScript的系统上部署这个输出，从Node.js, less server, Workers, Edge-side渲染或纯静态。

生产就绪

Nuxt应用程序可以部署在Node或Deno服务器上，预呈现为托管在静态环境中，或者部署到无服务器和边缘提供程序。

模块化

模块系统允许通过自定义特性和与第三方服务的集成来扩展Nuxt。

架构

Nuxt由不同的 core packages组成:

Core Engine: nuxt
Bundlers: @nuxt/vite-builder and @nuxt/webpack-builder
Command line interface: nuxi
Server engine: nitro
Development kit: @nuxt/kit
Nuxt 2 Bridge: @nuxt/bridge
Nuxt是Vue.js项目的支柱，在保持灵活性的同时，提供了构建项目的结构。
可扩展的强大模块生态系统和钩子引擎，它可以很容易地连接你的REST或GraphQL端点，最喜欢的CMS, CSS框架和更多。PWA和AMP支持离你的Nuxt项目只有一个模块的距离。

如下图：

Nuxt 详细概述
打字千百句，不如一张图。

Nuxt 的经典案例
让每一个用户获取到稳定、及时的页面体验，是前端工程师们一直以来努力的方向。

小编给大家讲解一下真实的用Nuxt 框架开发的大型项目：开发效率提升50%以上，爱奇艺官网主站就是用的 Nuxt实践。

作为一个拥有丰富内容资源的视频网站，爱奇艺官网主站需要频繁进行节目上线或者下线、各种活动配置等操作调整，对于页面SSR服务的可用性及稳定性，都有着极高的要求。

在2019年之前，爱奇艺官网主站页面的SSR采用的是在CMS平台中书写Velocity模板，由Java编译，优点是渲染速度快，但缺点也非常明显：

在CMS平台中开发体验不好：没有传统IDE方便，不能配置快捷键、不能安装插件等等，导致开发效率低下。
前后端代码不同构：由于后端使用Velocity模板，而前端需要使用Vue，导致前后端代码不同构。
破坏Vue组件封装性：由于Java无法编译Vue组件，所有的Vue组件都需要用Slot的方式在CMS平台中书写以达到SEO和SSR的目的。
基于以上所有原因，爱奇艺团队决定使用Node来进行SSR。因为爱奇艺团队的前端框架是Vue，因此爱奇艺团队选择了配套的Nuxt框架进行SSR。

使用Nuxt进行SSR，难点并不在于如何使用Nuxt，而在于如何维护这个服务，保证其性能、稳定性等，

具体如下图：

爱奇艺官网

详解 Nuxt 3.4 更新重点
Nuxt 3.4.0是Nuxt 3的最新版本，带来了令人兴奋的新功能，包括对View Transitions API的支持，将丰富的JavaScript有效载荷从服务器传输到客户端，等等。

直接更新：

nuxi upgrade --force
View Transitions API Support

在线演示：
https://nuxt-view-transitions.surge.sh

友友你们可以通过在线演示注意到，基于Chromium的浏览器现在提供了一个新的web平台API：视图转换API。这是一个令人兴奋的本地浏览器转换新功能，它（除其他外）能够在不同页面上的不相关元素之间转换。

Nuxt现在提供了一个阶段性的实现，它将在v3.4发布周期内进行积极的开发。

效果如下：

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

对Nuxt处理有效载荷的方式进行了重大更改（在实践标志下）。在进行服务器端渲染时，Payload用于将数据从服务器发送到客户端，并避免在水合阶段重复获取数据。

export default defineNuxtConfig({
  experimental: {
    renderJsonPayloads: true
  }
})

启用了这个新选项，这意味着现在可以开箱即用地支持各种丰富的JS类型：正则表达式、日期、Map和Set、BigInt，以及NuxtError和Vue特定的对象，如ref、reactive、shallowRef和shallowReactive。

这一切都有可能，因为Rich Harris/贬值#58。很长一段时间以来，由于错误和其他非POJO对象的串行化问题，Nuxt一直在使用我们自己的贬值分叉，但我们现在已经转换回原来的分叉。

您甚至可以使用新的对象语法Nuxt插件注册自己的自定义类型：

export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

注意：这只影响Nuxt应用程序的有效负载，即存储在useState中、从useAsyncData返回或通过nuxtApp.payload手动注入的数据。它不影响通过$fetch或useFetch从Nitro服务器路由提取的数据，尽管这是我热衷于进一步探索的一个领域。

初步测试显示了显著的加速：对于一个具有大JSON负载的非常小的应用程序，服务器总响应时间提高了25%，但我敦促您运行自己的测试并与我们分享结果。

如前所述，官方正在将其合并到一个标志后面，以便对其进行广泛测试，并收集对新方法的反馈。最重要的潜在变化是，有效载荷现在不再在窗口中可用立即NUXT。相反，官方现在需要初始化Nuxt应用程序来解析有效负载，因此任何访问Nuxt的代码都需要在插件中运行，或者在Nuxt应用生命周期的稍后阶段运行。如果您在项目中预见到或遇到问题，请随时提出问题。

Object-syntax Nuxt plugins

官方现在支持对象语法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()
      // 
    }
  }
})

未来，nuxt 官方计划基于您在Nuxt插件中传递的元数据启用构建优化。

Easier Devtools Configuration

在项目中启用Nuxt DevTools更容易：只需在Nuxt.config文件中设置DevTools:true即可启用DevTools。

export default defineNuxtConfig({
  devtools: true
})

Nuxt DevTools : https://github.com/nuxt/devtools

如下图：

Layers Improvements

官方现在支持在层内转换///@@@别名，这意味着在层内导入时不再需要使用相对路径。

这意味着使用“普通”Nuxt项目作为一个层要容易得多，而不需要专门将其作为一个图层来编写。

Better Context Transforms

官方现在转换definePageMeta和defineNuxtComponent的某些键，这意味着您应该可以减少丢失Nuxt实例的问题。这包括支持在asyncData中等待后访问Nuxt实例，以及为仍在使用Options API的用户提供设置函数。在使用异步函数时，您不再需要包装中间件并使用defineNuxtRouteMiddleware进行验证。

Ecosystem Updates

和往常一样，这个版本将引入上游改进，包括新的Consola v3和Nitropack v2.3.3（预计很快会有一个新的次要版本）。

‘Breaking fixes’

官方也借此机会在这个小版本中进行了一些清理。

以前可以通过x-nuxt-no-ssr标头（未记录）来强制SPA渲染。
官方现在默认禁用了这种行为，但您可以通过将experial.respectNoSSRHeader设置为true来恢复它。或者，您可以在服务器上设置event.context.nuxt.noSSR以强制SPA渲染。
官方已经删除了（不推荐使用）#head别名，并默认禁用了@vueuse/head行为的polyfill。（它仍然可以通过实验性的.polyfillVueUseHead启用。）
官方已经删除了（已弃用）experial.viteNode选项。可以使用vite.devBundler进行配置。
官方不赞成在没有公钥的情况下访问公共运行时配置。这是一个与Nuxt 2的非文档兼容性措施，我们计划在v3.5中完全删除它。
为了修复vue路由器集成的一个错误，我们现在生成了一个稍微不同的路径匹配语法。如果您依赖于生成的确切路径，