Nuxt 是有史以来最美丽的东西！

php中文网 2024-10-15 11:22:57

一点背景

我成为 vue 开发人员已有几年了。尽管我使用过早期版本（尤其是 vue 2.x）并尝试过几次 nuxt 2，但我一直犹豫是否使用 nuxt 2 作为 vue 项目的主要工具。我只是不喜欢它的某些方面（我个人的意见），所以我更喜欢坚持使用原生 vue，除非我绝对需要使用 nuxt。

但是，随着 Vue 3（顺便说一句，这真是太棒了）和 Nuxt 3 的稳定版本，所有这一切都发生了变化。我用 Nuxt 3 做了一些实践项目，以真正了解发生了什么变化，并看看我是否可以找到原因也许会改变我的想法。好吧，Nuxt 3 就是它所声称的一切，我不认为自己会以任何其他方式构建 Vue 应用程序。

这篇短文重点介绍了我喜欢 Nuxt 3 的所有方面（排名不分先后），并强调了为什么我更喜欢使用 Vue。

免责声明！

我可能会或可能不会提到自 Nuxt 2 以来就已经存在的功能，所以请原谅我，Nuxt 社区，我对你们的游戏不熟悉。

这篇文章是什么

这篇文章是关于我最喜欢 Nuxt 3 的事情。这是我个人对 Nuxt 3 为何令人惊叹以及我为何对它感到兴奋的看法。

本文不是什么

本文并不是为了突出 Nuxt 3 的整体最佳功能，也许我会在另一篇文章中介绍它。

努西，你这个美丽的美人！

Nuxt 3 引入了强大的 CLI，使创建项目变得更加容易。您可以更快地从头开始启动项目，或者根据您的用例从各种可用模板中选择快速样板。但是等等，还有更多！我们不仅有能力创建新项目和样板文件；还有能力创建新项目和样板文件。我们可以轻松添加 Nuxt 模块（已进行改版！）以及创建布局、页面、组件、插件和中间件，所有这些都可以相对轻松地通过 CLI 进行，并使用一些初始样板来帮助您启动和运行。这消除了设置项目所涉及的大量手动工作，并节省了大量时间。

当然是 TypeScript

我们都同意 TypeScript 本身是近年来 Web 开发中发生的最好的事情之一。随着 Vue 3 中的添加，它很自然地会找到 Nuxt 的方式。但这还不是全部 - 我喜欢 TypeScript 是 Nuxt 3 中的默认设置这一事实。在 Nuxt 中从 JavaScript 切换到 TypeScript 是无缝的，需要零配置。能够在 Nuxt 中利用 TypeScript 的所有强大功能只会让体验变得更好。

维特！维特！！维特！！！

Nuxt 3 默认使用 Vite，如果您还不知道，它只会让体验变得更好。 Vite 由 Vue 的创建者 Evan You 开发，旨在解决 Webpack 等传统捆绑器的局限性，特别是在开发速度和构建性能方面。因此，开箱即用，我们可以在 Nuxt 中获得 Vite 附带的所有功能，无需额外配置。

import { x } from... 不，不需要！

Vue 3 的一个值得注意的新增功能是 Composition API，它需要在原生 Vue 3 中进行大量手动导入才能充分利用其功能。然而，Nuxt 3 显着简化了这个过程。

在 Nuxt 3 中，您可以使用 Composition API 的功能，例如创建计算属性、反应变量、引用和可组合项，而无需手动导入它们。 Nuxt 3 包含下一代自动导入功能，可自动导入常用的 API 和组件，减少样板代码并使开发更加顺利。

我们来谈谈模块

通常需要额外的库和模块来构建应用程序中的某些功能。 Nuxt 3 将模块的概念提升到了一个全新的水平，简化了开发，并且更容易找到各种模块和包的 Nuxt 特定包装器。

从 Nuxt 团队构建的模块，如 Nuxt UI（天哪！我喜欢这个吗！）和 Nuxt Image，到协助身份验证、SEO、数据库管理、UI、动画等的外部模块，Nuxt 3 打开开启一个充满可能性的全新世界。

我将在另一篇文章中详细介绍一些我最喜欢的模块，因为我们只需要多讨论一下。

Nuxt UI，我爱你！

Nuxt 3 带来了 Nuxt UI，用最简单的术语来说，它是在 Vue 和 Nuxt 中构建界面的最佳方式。 Nuxt UI 是一个 Nuxt 模块

“...提供了一组使用 Tailwind CSS 和 Headless UI 构建的 Vue 组件和可组合项，以帮助您构建美观且易于访问的用户界面。”

它本质上拥有创建任何类型的现代界面所需的几乎一切，以及令人惊叹且高度可定制的组件，可以将您的开发时间缩短高达 80%。我将写一篇单独的文章专门强调这是多么令人难以置信。

Nuxt 内容更好！

Nuxt 内容升级！如果您还不知道，Nuxt Content 是直接内置于 Nuxt 中的基于文件的 CMS。它提供了一种使用 .yml、.json、.md 和 .csv 文件构建动态页面的简单快捷的方法。

此升级带来了令人惊叹的功能，例如代码突出显示、强大的查询生成器以及一个非常显着的增强功能：MDC 语法。 MDC 语法允许您在 Markdown 文件中使用 Vue 组件，这简直太棒了！ Nuxt Content 还进行了大规模重写，支持使用内置组件和可组合项，使使用 Nuxt Content 构建应用程序更加简单。