Vue Amsterdam 2022：第八部分 - Nuxt Web

欢迎！很高兴在我的 Vuejs 阿姆斯特丹会议 2022 总结系列的第七部分见到你，我在其中与你分享所有谈话的总结。

你可以在这里阅读我的 JSWorld Conference 2022 总结系列（分为四个部分），我总结了第一天的所有演讲。您还可以在我的博客中找到 2022 年 Vue 阿姆斯特丹会议之前的演讲。

（经常性）介绍

两年半之后，JSWorld 和 Vue 阿姆斯特丹会议于 6 月 1 日至 3 日再次在阿姆斯特丹剧院举行，这是我第一次有机会参加这个会议。我学到了很多东西，遇到了很多很棒的人，与优秀的开发人员交谈，度过了愉快的时光。第一天举行了 JSWorld 会议，第二天和第三天举行了 Vue Amsterdam。

会议充满了信息，有很多很棒的演讲者，他们每个人都教会了我一些有价值的东西。他们都想与其他开发人员分享他们的知识和信息。所以我想如果我能继续分享它并帮助其他人使用它会很棒。

起初，我尝试分享一些笔记或幻灯片，但我觉得还不够好，至少不如演讲者与我分享的那么好。所以我决定重新观看每一次演讲，深入了解他们，搜索，做笔记并将它们与他们的幻灯片甚至他们演讲中的确切单词结合起来，然后与你分享，这样我与你分享的内容至少是与我从他们那里学到的水平相同。

非常重要的一点

你在这几篇文章中读到的一切都是演讲者自己努力和时间的结果，我只是试图学习它们，以便将它们变成这些文章。甚至这些文章中写的许多句子正是他们所说的或他们在幻灯片中写的。这意味着如果你学到了新东西，那是因为他们的努力。

最后但并非最不重要的一点是，我可能不会在一些演讲中深入研究每一个技术细节或实时编码。但是如果您有兴趣并需要更多信息，请告诉我，我会尝试单独写一篇更详细的文章。另外，不要忘记查看他们的 Twitter/Linkedin。

在这里您可以找到会议的程序。

Nuxt 网络

塞巴斯蒂安肖邦- Nuxt 联合创始人

我们@nuxtlabs的使命是提供最佳的开发者体验，为您的最终用户提供最佳的用户体验。我们用 Nuxt 做这件事已经六年了。

Nuxt 是一个用于创建任何类型的 Vue 应用程序的 Web 框架。这意味着你可以这样做：

• 服务端渲染 (SSR)
• 静态站点生成 (SSG)
• 客户端渲染 (CSR)
• 得益于 Nuxt 3 的边缘渲染 (ESR)

自 2016 年 10 月 Nuxt 开始以来，它在 npm 上的下载量约为 4600 万次，拥有 30 万个在线网站和 1.8 万个 GitHub 贡献者。

Nuxt 2 和 Nuxt 3 之间的比较

• Web 服务器：对于开发和生产的 Web 服务器，Nuxt 2 使用连接，这是 Express.js 的核心，但对于 Nuxt 3，他们创建了 h3，它可以在任何类型的 JavaScript 环境中工作。

• Bundler： Nuxt 2 使用 Webpack 4，Nuxt 3 从 Webpack 5 开始，但在 Vite 发布后，它被官方支持为默认的 Bundler。

• UI 框架： Nuxt 2 中的 Vue 2 和 Nuxt 3 中的 Vue 3

• 路由库： Nuxt 2 中的 Vue Router 3 和 Nuxt 3 中的 Vue Router 4，如果没有找到pages/目录，则不包含。

• 元管理：由于 Nuxt 执行 SSR，因此能够管理元标记非常重要。 Nuxt 2 中使用了 Vue Meta，Nuxt 3 中使用了 VueUse Head。

• Server(less) 打包器：这是在 Nuxt 3 中引入的，它通过删除 node_modules 来压缩 nuxt 应用程序以进行生产，因此您的 Nuxt 应用程序将约为 1 兆字节。

这是 Nuxt 2 和 Nuxt 3 之间的 hello world 包大小比较：

Nuxt 3 小得多的原因之一是它是可摇树的，就像 Vue 3 一样。因此，如果您不使用某个功能，它将不会包含在捆绑包中。

Next 等效包大小约为 80kB。

在那个 Nuxt 3 JS 包中，25.3kB 来自 Vue，剩下的 8.7kB 包括：

• 带水合的应用程序入口
• <Suspense>的根组件
• 通用和轻量级路由器： useRouter() 、 middleware和<NuxtLink>
• 头部可组合和组件： useHead() , <Title> , <Meta> , <Script> , ...
• 通用数据获取： $fetch()
• 默认错误页面： 404和500
• Plugins和runtimeConfig逻辑
• useNuxtApp()可组合和钩子： app:created , app:mounted , page:start , ...

边缘渲染

Edge Side Rendering（也被 Ryan Dahl 命名为 JavaScript 容器）是一种在世界各地靠近最终用户的 CDN 节点上运行 JavaScript 的能力。

优点：

• 从最终用户运行毫秒
• 0ms 冷启动
• 无需维护服务器
• 自动缩放
• 经济实惠

目前的一些边缘计算提供商：

• CloudFlare 工作者
• Vercel 边缘
• Netlify 边缘
• Deno 部署
• 拉姆达边缘
• 堆栈路径

内容 V2

Nuxt Content 是一个Nuxt 模块，可以读取content/目录中的 Markdown、YAML、CSV 和 JSON 文件，为您的应用程序创建强大的数据层，现在Content V2已经推出，具有更多功能。

努克斯特 2.X

Nuxt 2.X 的未来：

• Vue 2.7
• Nuxt 桥（测试版）
  • 维特
  • 硝基
  • 组合 API 和脚本设置
  • 打字稿
  • nuxi CLI
  • 后CSS 8

努克斯特 3.0

Nuxt 3.0 即将推出：

• Nuxt 图像
• 混合渲染：服务器 + SWR + 预渲染
• 全静态生成
• 预览模式
• 服务器会话和身份验证
• 服务工作者 (PWA)
• SEO 助手和 i18n 支持

第八讲结束

我希望你喜欢这部分，它对你和对我一样有价值。在接下来的几天里，我将与你分享剩下的谈话。敬请关注…

也在这里发布。