学习 Nuxt,包含 100+ 技巧!
公告·  

全新网站

我们很高兴发布全新的 nuxt.com,它由 Nuxt UI 驱动,并且现在是开源的。

Nuxt.com 是您学习 Nuxt 的主要入口点。 每月访问量超过 30 万,现在是时候给它一个全新的外观和感觉了。

全新设计

我们回归了 Nuxt 的原始颜色,采用海军蓝背景 (#020420) 及其标志性的亮绿色 (#00DC82)。

Nuxt Website Screenshot
了解 Nuxt Design Kit 以及我们的 Logo History

我们希望在所有官方文档中实现一致的设计

Nuxt ImageNuxt ContentNuxt DevToolsNuxt UI

我们非常喜欢这个新设计,希望您也喜欢。 这只是网站诸多改进的第一步。

改进的导航

从现在开始,您可以轻松地在五个主要文档类别之间跳转

在右侧,您可以看到目录以及社区快捷方式:编辑此页面、在 Discord 上聊天等。

源代码按钮

当查看 Nuxt 内置的 componentscomposablesutilscommandskit utilities 时,您现在可以通过点击按钮。

Nuxt Source Code Button
查看 <NuxtLink> 文档页面上的示例。

改进的搜索功能

当按下 CMD+K 时,您可能会注意到一个新的模态框。 我们利用 Nuxt UI <CommandPalette> 组件,结合 Nuxt Content 数据(搜索和导航)来提供更好的搜索体验。

使用命令面板,您可以

  • 跳转到页面
  • 在文档中搜索
  • 搜索模块
  • 切换颜色模式

我们计划很快添加更多命令。

迁移到 Nuxt UI

新网站由 Nuxt UI 驱动,Nuxt UI 是我们为 Nuxt 量身定制的 UI 库,构建于 Tailwind CSSHeadless UI 之上。

该网站还使用了 Nuxt UI Pro,这是一组构建于 Nuxt UI 之上的高级组件,可在数分钟内创建美观且响应迅速的 Nuxt 应用程序。

它包括诸如 <UHeader><UFooter><ULandingHero><ULandingCard> 等组件。

我们计划在十月底发布 Nuxt UI Pro 的完整文档。如果您迫不及待想要提前访问,您现在就可以 购买许可证 并访问我们在 GitHub 上的私有仓库。

这次 迁移 是改进 Nuxt UI 和 UI Pro 并修复一些错误的好机会,同时也更改了 +9,004 / -23,113 行代码。

阅读更多关于 Nuxt UI 的信息。

Open Graph 图像

我们非常喜欢在社交媒体上分享链接时使用自定义图像。 这就是为什么我们在所有文档页面上都添加了 OG 图像。

安装页面的示例

Nuxt OG Image
了解 Nuxt OG Image 模块。

在 GitHub 上可用

我们很自豪地宣布,该网站现在是开源的,并在 GitHub 上可用。

在 GitHub 上查看 nuxt/nuxt.com

下一步是什么?

这个新网站是我们计划进行的即将到来的变更的开始,其中一些是

  • 团队和贡献者页面
  • 集成页面,以展示 Nuxt 的所有可能性:托管、CMS、数据库等。
  • 模板页面(目前是 nuxt.new),用于列出官方和社区启动器
  • 以及更多...

我们期待您在 TwitterDiscordGitHub 上提供反馈.

感谢您阅读这篇博文,祝您 Nuxting 愉快 🤟