介绍

Nuxt 的目标是通过卓越的开发者体验，使 Web 开发直观且高性能。

Nuxt 是一个免费且开源框架它提供了一种直观且可扩展的方式，以创建类型安全、高性能和生产级别的全栈 Web 应用程序和网站，并使用Vue.js.

我们已做好一切，让您可以从一开始就编写 .vue 文件，同时在开发中享受热模块替换，并在生产中默认通过服务器端渲染获得高性能应用程序。

Nuxt 没有厂商锁定，允许您在任何地方部署您的应用程序，甚至在边缘。

如果您想在浏览器中试用 Nuxt，您可以在我们的在线沙盒中试用。

自动化和约定

Nuxt 使用约定和规范的目录结构来自动化重复性任务，让开发者专注于推出新功能。配置文件仍然可以自定义和覆盖其默认行为。

  • 基于文件的路由： 根据您的 app/pages/ 目录的结构定义路由。这可以使组织您的应用程序更容易，并避免手动路由配置的需要。
  • 代码分割： Nuxt 自动将您的代码分割成更小的块，这有助于减少应用程序的初始加载时间。
  • 开箱即用的服务器端渲染： Nuxt 附带内置的 SSR 功能，因此您无需自己设置单独的服务器。
  • 自动导入： 在各自的目录中编写 Vue 可组合函数和组件，无需导入即可使用，并受益于摇树优化和优化的 JS 包。
  • 数据获取实用程序： Nuxt 提供可组合函数来处理兼容 SSR 的数据获取以及不同的策略。
  • 零配置 TypeScript 支持： 通过我们自动生成的类型和 tsconfig.json，无需学习 TypeScript 即可编写类型安全的代码。
  • 配置的构建工具： 我们默认使用Vite来支持开发中的热模块替换（HMR）以及将您的代码打包用于生产，并内置最佳实践。

Nuxt 负责这些，并提供前端和后端功能，让您可以专注于最重要的事情：创建您的 Web 应用程序。

服务器端渲染

Nuxt 默认提供内置的服务器端渲染 (SSR) 功能，无需您自己配置服务器，这为 Web 应用程序带来了许多优势

  • 更快的初始页面加载时间： Nuxt 将完全渲染的 HTML 页面发送到浏览器，该页面可以立即显示。这可以提供更快的感知页面加载时间，并改善用户体验（UX），尤其是在较慢的网络或设备上。
  • 改进的 SEO： 搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容立即可用，而无需 JavaScript 在客户端渲染内容。
  • 在低功耗设备上性能更佳： 它减少了需要在客户端下载和执行的 JavaScript 数量，这对于可能难以处理繁重 JavaScript 应用程序的低功耗设备非常有利。
  • 更好的可访问性： 内容在初始页面加载时立即可用，改善了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
  • 更简单的缓存： 页面可以在服务器端缓存，这可以通过减少生成内容并将其发送到客户端所需的时间来进一步提高性能。

总而言之，服务器端渲染可以提供更快、更高效的用户体验，并改善搜索引擎优化和可访问性。

作为一种多功能框架，Nuxt 允许您使用 nuxt generate 将整个应用程序静态渲染到静态主机上，使用 ssr: false 选项全局禁用 SSR，或者通过设置 routeRules 选项利用混合渲染。

阅读更多关于Nuxt 渲染模式。

服务器引擎

Nuxt 服务器引擎Nitro解锁全新的全栈功能。

在开发中，它使用 Rollup 和 Node.js worker 来处理您的服务器代码和上下文隔离。它还通过读取 server/api/ 中的文件和 server/middleware/ 中的服务器中间件来生成您的服务器 API。

在生产中，Nitro 将您的应用程序和服务器构建到一个通用的 .output 目录中。此输出轻量级：经过最小化处理并移除了任何 Node.js 模块（除了 polyfills）。您可以将此输出部署到任何支持 JavaScript 的系统上，包括 Node.js、Serverless、Workers、边缘渲染或纯静态环境。

阅读更多关于Nuxt 服务器引擎。

生产就绪

Nuxt 应用程序可以部署在 Node 或 Deno 服务器上，预渲染以托管在静态环境中，或部署到无服务器和边缘提供商。

阅读更多关于部署部分。

模块化

模块系统允许您通过自定义功能和与第三方服务的集成来扩展 Nuxt。

阅读更多关于Nuxt 模块概念。

架构

Nuxt 由不同的核心包:

我们建议阅读每个概念，以全面了解 Nuxt 的功能和每个包的范围。