Nuxt 提供令人难以置信的开发人员体验，其中包含许多性能和应用程序设置最佳实践。 在最近的版本中，他们一直在努力将这种开发人员体验提升到新的水平，并提供了一些更新的功能，这些功能可以加快和简化开发人员流程。 让我们今天探索一下。
我为您设置了一个仓库和网站，以便您探索其中一些功能！ 您可以在此处查看它们
Nuxt 内容
您不再需要将 Nuxt 与外部无头 CMS 配合使用并进行所有设置，特别是如果您不需要大规模的内容，而只是像博客一样较小的内容。 Nuxt 内容提供了一个基于 git 的无头 CMS，您可以在其中根据自己的偏好使用 markdown、CSV、YAML 或 XML 编写配置。 有一些开箱即用的 配置设置 可供您使用，并且编写自定义配置就像创建属性一样简单。
这对开发意味着：您可以在目录中编写静态 Markdown 文件，这就是您的博客！ 我们正在使用您通常在 Nuxt 中使用的相同动态页面 API 来生成此内容。
它还提供开箱即用的全文搜索，这是一个非常棒的功能，可以快速添加到博客中，而无需集成第三方服务。
Debbie O'Brien 的这篇教程 是一个很棒的指南，它将引导您完成设置的每个步骤，强烈推荐。
Nuxt 组件
我注意到我一遍又一遍地做的事情是在所有组件中键入导入代码。 我确实有一些代码片段可以使此过程更快，但是将它们添加到每个文件中仍然会打断我的工作流程。
Nuxt 组件模块会扫描、导入和注册组件，这样我们就无需再执行此操作。 组件必须位于 components 目录中，但我们可以在布局、页面和组件本身中使用它们。
将此模块添加进来会对我们的 nuxt.config.js 造成一个很小的改变
export default {
components: true
}
说真的，就这样！
如果您想深入了解，这篇 由 Kruite Patel 编写的非常全面的指南 将为您提供帮助。
如果您多次使用该组件，Nuxt 将进行一些不错的优化，例如自动为该组件创建共享块。 不过，在大型项目中使用时要谨慎，因为它可能会影响构建时间。
Nuxt Image
Nuxt Image 是一个较新的模块，它为优化后的响应式图像提供无缝且快速的调整大小和转换。 您可以使用他们的内置优化器，或使用 10 多个开箱即用的流行提供商，例如 Cloudinary 或 Fastly。
使用他们的 API 生成的代码输出是标准的 <img> 和 <picture> 标签，因此在将它们集成到您的工作流程中时不会出现混淆。
添加模块后，您将能够通过 nuxt.config.js 中的 images 属性向图像添加配置，并指定断点、提供商和其他配置
export default {
image: {
// The screen sizes predefined by `@nuxt/image`:
screens: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
xxl: 1536,
'2xl': 1536
},
// Generate images to `/_nuxt/image/file.png`
staticFilename: '[publicPath]/images/[name]-[hash][ext]',
domains: [
'images.unsplash.com'
],
alias: {
unsplash: 'https://images.unsplash.com'
}
}
}
这只是一个您可以使用的一些选项的示例。 完整文档在此处。
然后用法类似于任何 Vue 组件
<nuxt-img src="/nuxt-icon.png" />或
<nuxt-picture src="/nuxt-icon.png" />更多信息和所有选项 在此处有记录。 感谢 Ben Hong 让我知道此功能可用。 他还发布了一些 Nuxt 资源，值得探索！
示例仓库
我创建了一个示例仓库供您探索，其中使用了所有这些功能。 它是一个小型食谱博客，使用 nuxt-content 用于食谱条目，Nuxt 组件，这样我就无需定义导入，以及 nuxt-image 用于图像转换。
您可以访问此处查看所有功能的实际操作，对其进行分叉，试用它，并使其成为您自己的。
您也可以在其中看到我如何使用 Nuxt image 中的 $img API 用于背景图像，该 API 尚未完全记录。
Nuxt 提供令人难以置信的开发人员体验。 Nuxt 很快就会发布一个新版本，其中将包含更多更新，这些更新始终经过精心的实现。 这就是为什么使用 Nuxt 始终是一种乐趣，并证明它是一个非常适合团队和单个开发人员的框架。