新的NUXT具有过去的v2.10

NUXT提供了令人难以置信的开发人员体验，并具有大量的性能和应用程序设置的最佳实践。在最近的版本中，他们一直在努力将这种开发人员的体验提升到一个新的水平，并具有一些较新的功能，可以加快开发人员的流程。让我们今天探索一些。

我设置了一个存储库和网站，供您探索其中一些功能！您可以在此处查看它们：

演示现场网站

NUXT内容

您不再需要将NUXT与外部无头CMS配对，并且可以进行所有设置，尤其是如果您不在寻找大规模的东西，而是像博客之类的较小的东西。 NUXT内容提供了基于GIT的无头CMS，您可以根据您的喜好在Markdown，CSV，YAML或XML中编写配置。您可以使用一些包装盒配置设置，并且编写自定义配置与创建属性一样简单。

这对开发意味着什么：您可以在目录中编写静态降价文件，这可以是您的博客！我们使用的是通常在NUXT中使用的动态页面API来生成此内容。

它还提供了全文搜索，这是一个可爱的功能，可以添加到博客中，而不必集成第三方服务。

黛比·奥布莱恩（Debbie O'Brien）的本教程是一个令人难以置信的向导，它可以引导您完成所有设置，强烈建议您进行。

NUXT组件

我注意到我一次又一次地在所有组件中键入导入代码。我确实有一些片段可以使其更快一些，但是每个文件中的每个文件都在打断我的工作流程。

NUXT组件模块扫描，导入和寄存器组件，因此我们不再需要执行此操作。组件必须在组件目录中，但是我们可以在布局，页面和组件本身中使用它们。

该模块的添加是对我们的nuxt.config.js的一个小更改：

导出默认{
  组件：正确
}

说真的，就是这样！

如果您想深入潜水，那么Kruite Patel的这份令人难以置信的全面指南就可以了。

如果您重复使用组件，NUXT将进行一些不错的优化，例如自动为组件创建共享块。但是，在大型项目上使用它时要注意，因为这可能会影响构建时间。

NUXT图像

NUXT Image是一个较新的模块，可提供无缝且快速的大小和转换，以进行优化的响应图像。您可以使用他们的内置优化器，也可以与10个现成的流行提供商（例如Cloudinary或Farly）一起使用。

使用其API的代码输出是标准和标签，因此将它们集成到工作流程中时没有混淆。

添加模块后，您将能够通过nuxt.config.js中的图像属性添加配置，并指定断点，提供商和其他配置：

导出默认{
  图像： {
    //屏幕大小由`@nuxt/image`预定义：
    屏幕：{
      XS：320，
      SM：640，
      MD：768，
      LG：1024，
      XL：1280，
      xxl：1536，
      '2xl'：1536
    }，，
    //将图像生成`/_nuxt/image/file.png`
     staticFileName：'[publicPath]/images/[name]  -  [hash] [ext]'，
     域：[[
        'images.unsplash.com'
    ]，，
    别名：{
      Unsplash：'https：//images.unsplash.com'
    }
  }
}

这只是作为您可用的一些选项的样本，作为一个例子。完整的文档在这里。

然后使用类似于任何VUE组件：

 <nuxt-img src="%E2%80%9C"></nuxt-img>

或者

<nuxt-picture src="%E2%80%9C"></nuxt-picture>

此处记录了更多信息和所有选项。给本洪的帽子提示让我知道这可以使用。他也有一些NUXT资源值得探索！

样品回购

我创建了一个示例存储库供您探索使用所有这些功能的示例。这是一个小型食谱博客，带有NUXT-CONTENT，用于食谱条目，NUXT组件，因此我不需要定义导入和图像转换的nuxt-image。

演示现场网站

您可以在此处访问它，以查看所有操作，分叉，与之一起玩，并自己制作。

您可以在其中看到我在这里如何使用$ img api在此处用于背景图像，但该图像尚未完全记录。

NUXT提供了令人难以置信的开发人员体验。 NUXT甚至很快就会发布新版本，并提供更多更新，总是专业实施。这就是为什么使用NUXT一直如此快乐的原因，并且被证明是团队和单一开发人员的绝佳框架。

以上是新的NUXT具有过去的v2.10的详细内容。更多信息请关注PHP中文网其他相关文章！