使用 Vue & UI Pro 的仪表板模板

简介

Nuxt 的目标是使 Web 开发直观且高效,同时注重出色的开发者体验。

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

我们已经做好了所有准备,您可以从一开始就编写 .vue 文件,同时享受开发过程中的热模块替换,以及默认情况下使用服务器端渲染的生产环境中的高性能应用程序。

Nuxt 没有供应商锁定,允许您将应用程序部署到 任何地方,甚至边缘网络

如果您想在浏览器中尝试 Nuxt,您可以 在我们的在线沙箱中试用它

自动化和约定

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

  • 基于文件的路由: 根据您 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 工作线程来处理您的服务器代码和上下文隔离。它还会通过读取 server/api/ 中的文件和 server/middleware/ 中的服务器中间件来生成您的服务器 API。

在生产环境中,Nitro 将您的应用程序和服务器构建到一个通用的 .output 目录中。此输出很轻量级:已缩小并删除了任何 Node.js 模块(除了 polyfills)。您可以将此输出部署到任何支持 JavaScript 的系统上,从 Node.js、无服务器、工作线程、边缘端渲染到纯静态。

Nuxt 服务器引擎 中了解更多。

生产就绪

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

部署部分 中了解更多。

模块化

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

Nuxt 模块概念 中了解更多。

架构

Nuxt 由不同的 核心包 组成

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