简介Nuxt.jsv4

介绍 · Nuxt v4 入门 --- Introduction · Get Started with Nuxt v4 (opens new window)

Introduction

Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind.

Nuxt 的目标是让 Web 开发变得直观且高效，同时兼顾出色的开发人员体验。

Nuxt is a free and open-source framework (opens new window) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js (opens new window).

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

We made everything so you can start writing .vue files from the beginning while enjoying hot module replacement in development and a performant application in production with server-side rendering by default.

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

Nuxt has no vendor lock-in, allowing you to deploy your application everywhere, even on the edge (opens new window).

Nuxt 没有供应商锁定，允许您在任何地方部署应用程序，即使在边缘 (opens new window)。

If you want to play around with Nuxt in your browser, you can try it out in one of our online sandboxes (opens new window). 如果您想在浏览器中使用 Nuxt，您可以在我们的一个在线沙盒中进行尝试 (opens new window)。

自动化和约定

Automation and Conventions

Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.

Nuxt 使用约定和固定的目录结构来自动执行重复性任务，并允许开发人员专注于推送功能。配置文件仍然可以自定义和覆盖其默认行为。

• File-based routing: define routes based on the structure of your app/pages/ directory (opens new window). This can make it easier to organize your application and avoid the need for manual route configuration.
  基于文件的路由： 根据 app/pages/ 目录 (opens new window)的结构定义路由。这可以更轻松地组织应用程序，并避免手动配置路由。

• Code splitting: Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
  代码分割： Nuxt 会自动将您的代码分割成更小的块，这有助于减少应用程序的初始加载时间。

• Server-side rendering out of the box: Nuxt comes with built-in SSR capabilities, so you don't have to set up a separate server yourself.
  开箱即用的服务器端渲染： Nuxt 带有内置的 SSR 功能，因此您无需自己设置单独的服务器。

• Auto-imports: write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles.
  自动导入： 在各自的目录中编写 Vue 可组合项和组件，并使用它们，而无需导入它们，从而获得摇树和优化 JS 包的好处。

• Data-fetching utilities: Nuxt provides composables to handle SSR-compatible data fetching as well as different strategies.
  数据获取实用程序： Nuxt 提供可组合项来处理与 SSR 兼容的数据获取以及不同的策略。

• Zero-config TypeScript support: write type-safe code without having to learn TypeScript with our auto-generated types and tsconfig.json.
  零配置 TypeScript 支持： 使用我们自动生成的类型和 tsconfig.json 编写类型安全的代码，而无需学习 TypeScript。

• Configured build tools: we use Vite (opens new window) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in.
  配置的构建工具： 我们默认使用 Vite (opens new window) 来支持开发中的热模块替换 (HMR)，并将您的代码与最佳实践捆绑在一起以进行生产。

Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: creating your web application.
Nuxt 负责处理这些问题并提供前端和后端功能，以便您可以专注于重要的事情： 创建您的 Web 应用程序 。

服务器端渲染 (opens new window)

Server-Side Rendering【SSR】

Nuxt comes with built-in server-side rendering (SSR) capabilities by default, without having to configure a server yourself, which has many benefits for web applications: Nuxt 默认内置了服务端渲染（SSR）功能，无需自行配置服务器，这对于 Web 应用来说有很多好处：

• Faster initial page load time: Nuxt sends a fully rendered HTML page to the browser, which can be displayed immediately. This can provide a faster perceived page load time and a better user experience (UX), especially on slower networks or devices.
  更快的初始页面加载时间： Nuxt 将完整渲染的 HTML 页面发送到浏览器，并可立即显示。这可以提供更快的页面加载时间和更好的用户体验 (UX)，尤其是在网络或设备速度较慢的情况下。
• Improved SEO: search engines can better index SSR pages because the HTML content is available immediately, rather than requiring JavaScript to render the content on the client-side.
  改进的 SEO： 搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容可立即使用，而不需要 JavaScript 在客户端呈现内容。
• Better performance on low-powered devices: it reduces the amount of JavaScript that needs to be downloaded and executed on the client-side, which can be beneficial for low-powered devices that may struggle with processing heavy JavaScript applications.
  在低功耗设备上具有更好的性能： 它减少了需要在客户端下载和执行的 JavaScript 的数量，这对于可能难以处理繁重 JavaScript 应用程序的低功耗设备来说是有益的。
• Better accessibility: the content is immediately available on the initial page load, improving accessibility for users who rely on screen readers or other assistive technologies.
  更好的可访问性： 内容在初始页面加载时立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
• Easier caching: pages can be cached on the server-side, which can further improve performance by reducing the amount of time it takes to generate and send the content to the client.
  更容易缓存： 页面可以在服务器端缓存，这可以通过减少生成和将内容发送到客户端所需的时间来进一步提高性能。

Overall, server-side rendering can provide a faster and more efficient user experience, as well as improve search engine optimization and accessibility.
总体而言，服务器端渲染可以提供更快、更高效的用户体验，并提高搜索引擎优化和可访问性。

As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with nuxt generate, disable SSR globally with the ssr: false option or leverage hybrid rendering by setting up the routeRules option.
由于 Nuxt 是一个多功能框架，它使您能够使用 nuxt generate 将整个应用程序静态呈现到静态托管，使用 ssr: false 选项全局禁用 SSR，或通过设置 routeRules 选项利用混合渲染。

服务器引擎 (opens new window)

Server engine

The Nuxt server engine Nitro (opens new window) unlocks new full-stack capabilities. Nuxt 服务器引擎 Nitro (opens new window) 解锁了新的全栈功能。

In development, it uses Rollup and Node.js workers for your server code and context isolation. It also generates your server API by reading files in server/api/ and server middleware from server/middleware/.
在开发过程中，它使用 Rollup 和 Node.js 的 Worker 来处理服务器代码和上下文隔离。它还会通过读取 server/api/ 中的文件和 server/middleware/ 中的服务器中间件来生成服务器 API。

In production, Nitro builds your app and server into one universal .output directory. This output is light: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static. 在生产环境中，Nitro 会将您的应用和服务器构建到一个通用的 .output 目录中。此输出非常轻量：已最小化并移除所有 Node.js 模块（polyfill 除外）。您可以将此输出部署到任何支持 JavaScript 的系统上，无论是 Node.js、Serverless、Workers、边缘渲染还是纯静态系统。

已投入生产 (opens new window)

Production-ready

A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers. Nuxt 应用程序可以部署在 Node 或 Deno 服务器上，预渲染以托管在静态环境中，或部署到无服务器和边缘提供商。

模块化的 (opens new window)

Modular

A module system allows you to extend Nuxt with custom features and integrations with third-party services. 模块系统允许您使用自定义功能和与第三方服务的集成来扩展 Nuxt。

体系结构 (opens new window)

Architecture【架构】

Nuxt is composed of different core packages (opens new window): Nuxt 由不同的核心包 (opens new window)组成：

• Core engine: nuxt (opens new window) 核心引擎： nuxt (opens new window)
• Bundlers: @nuxt/vite-builder (opens new window), @nuxt/rspack-builder (opens new window) and @nuxt/webpack-builder (opens new window) 捆绑器： @nuxt/vite-builder (opens new window) 、 @nuxt/rspack-builder (opens new window) 和 @nuxt/webpack-builder (opens new window)
• Command line interface: @nuxt/cli (opens new window) 命令行界面： @nuxt/cli (opens new window)
• Server engine: nitro (opens new window) 服务器引擎： nitro (opens new window)
• Development kit: @nuxt/kit (opens new window) 开发套件： @nuxt/kit (opens new window)

We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.

DETAILS

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