Nuxt提供了一个令人难以置信的开发者体验，有很多性能和应用程序设置的最佳实践被植入。在最近的版本中，他们一直在努力将这种开发者体验提升到一个新的水平，用一些新的功能来加速和简化开发者的过程。今天我们就来探讨一下。
我为你建立了一个 repo 和网站，以探索其中的一些功能你可以在这里查看它们。
Nuxt内容
你不再需要将Nuxt与外部的无头CMS配对，做所有的设置，特别是如果你不是在寻找大规模的东西，而是像博客这样的小东西。Nuxt内容提供了一个基于git的无头CMS，你可以根据你的喜好，用markdown、CSV、YAML或XML来写配置。有一些开箱即用的配置设置供你使用，而编写自定义配置就像创建一个属性一样简单。
这对开发来说意味着：你可以在一个目录中写静态的Markdown文件，而那可以是你的博客我们使用与你通常在Nuxt中使用的动态页面API来生成这些内容。
它还提供了开箱即用的全文搜索，这是一个可爱的功能，可以快速添加到博客中，而不需要集成第三方服务。
Debbie O'Brien的这个教程是一个令人难以置信的指南，它引导你完成每一项设置，强烈推荐。
Nuxt组件
我注意到我一直在做的一件事就是在我所有的组件中输入导入代码，一次又一次。我确实有一些片段可以让这一切变得更快，但在每个文件中添加它们仍然有点干扰了我的工作流程。
Nuxt组件模块扫描、导入和注册组件，这样我们就不再需要这样做了。这些组件必须在组件目录中，但我们可以在布局、页面和组件本身中使用它们。
增加这个模块是对我们的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资源，也值得探索。
样板库
我已经创建了一个样本 Repo供你探索，它使用了所有这些功能。这是一个小型的食谱博客，用nuxt-content做食谱条目，用Nuxt组件，这样我就不需要定义导入，用nuxt-image做图片转换。
你可以访问它，看看它的运行情况，分叉它，玩弄它，并使它成为你自己的。
你可以在里面看到我是如何在Nuxt image中使用$img API来制作背景图片的，这一点还没有完全记录下来。
Nuxt提供了难以置信的开发者体验。Nuxt甚至很快就会推出新的版本，有更多的更新，总是专业地实现。这就是为什么使用Nuxt不断是一种乐趣，并被证明是一个伟大的框架，对团队和单个开发人员都是如此。
The postNew Nuxt Features past v2.10appeared first onCSS-Tricks.你可以通过成为MVP支持者来支持CSS-Tricks。
