介绍
Nuxt 是一个免费的 开源框架,提供了一种直观且可扩展的方式,用于创建类型安全、高性能和生产级的全栈网页应用和网站,基于 Vue.js。
我们设计了一切,使您可以从一开始就编写 .vue
文件,同时在开发中享受热模块替换,在生产中凭借默认的服务器端渲染享有高性能的应用。
Nuxt 没有供应商锁定,允许您将应用程序 部署到任何地方,甚至是边缘。
自动化与约定
Nuxt 使用约定和意见化的目录结构来自动化重复性任务,让开发者专注于推动功能。配置文件仍然可以自定义并覆盖其默认行为。
- 基于文件的路由: 根据
pages/
目录的结构 定义路由。这样可以更轻松地组织您的应用,避免手动配置路由的需要。 - 代码分割: Nuxt 自动将代码拆分成更小的块,这有助于减少应用的初始加载时间。
- 开箱即用的服务器端渲染: Nuxt 自带内置 SSR 功能,因此您无需自己配置单独的服务器。
- 自动导入: 在各自的目录中编写 Vue 组合式API和组件,无需手动导入,享受树摇和优化后的 JS 捆绑包的好处。
- 数据获取工具: Nuxt 提供组合式 API 来处理支持 SSR 的数据获取以及不同的策略。
- 零配置 TypeScript 支持: 编写类型安全的代码,而无需学习 TypeScript,借助我们的自动生成类型和
tsconfig.json
。 - 配置的构建工具: 我们默认使用 Vite 来支持开发中的热模块替换 (HMR) 且最佳实践已内置到生产中代码捆绑。
Nuxt 处理这些任务,提供前端和后端功能,让您可以专注于重要的事情:创建您的网页应用。
服务器端渲染
Nuxt 默认内置服务器端渲染 (SSR) 功能,无需您自己配置服务器,这为网页应用带来了很多好处:
- 更快的初始页面加载时间: Nuxt 向浏览器发送一个完全渲染的 HTML 页面,可以立即显示。这可以提供更快的感知页面加载时间和更好的用户体验 (UX),尤其在网络或设备较慢时。
- 改善 SEO: 搜索引擎可以更好地索引 SSR 页面,因为 HTML 内容是立即可用的,而不需要 JavaScript 在客户端渲染内容。
- 低功耗设备更好的性能: 减少需要在客户端下载和执行的 JavaScript,以便为可能在处理重型 JavaScript 应用时遇到困难的低功耗设备提供帮助。
- 更好的可访问性: 内容在页面初始加载时即刻可用,提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
- 更简单的缓存: 页面可以在服务器端缓存,这可以通过减少生成和发送内容到客户端所需的时间进一步提升性能。
总体来说,服务器端渲染可以提供更快和更高效的用户体验,同时改善搜索引擎优化和可访问性。
由于 Nuxt 是一个多功能框架,它使您能够通过 nuxt generate
将整个应用程序静态渲染为静态托管,
通过 ssr: false
选项全局禁用 SSR,或通过设置 routeRules
选项利用混合渲染。
服务器引擎
Nuxt 服务器引擎 Nitro 解锁了新的全栈能力。
在开发中,它使用 Rollup 和 Node.js 工作者来处理您的服务器代码和上下文隔离。它还通过读取 server/api/
中的文件和 server/middleware/
中的服务器中间件生成您的服务器 API。
在生产中,Nitro 将您的应用和服务器构建为一个通用的 .output
目录。此输出体积小:经过压缩并移除任何 Node.js 模块(除非是填充模块)。您可以在支持 JavaScript 的任何系统上部署此输出,从 Node.js、无服务器、工作者、边缘渲染到纯静态。
准备生产环境
Nuxt 应用可以在 Node 或 Deno 服务器上部署,预渲染以在静态环境中托管,或部署到无服务器和边缘提供商。
模块化
模块系统允许通过自定义功能和与第三方服务的集成来扩展 Nuxt。
架构
Nuxt 由不同的 核心包 组成:
- 核心引擎: nuxt
- 构建工具: @nuxt/vite-builder 和 @nuxt/webpack-builder
- 命令行接口: nuxi
- 服务器引擎: nitro
- 开发套件: @nuxt/kit
我们建议阅读每个概念,以全面了解 Nuxt 的能力和每个包的范围。