Nuxt 是一个免费且开源的框架它提供了一种直观且可扩展的方式,用于创建类型安全、高性能且达到生产级要求的全栈 Web 应用和网站,并与Vue.js.
我们构建了一切,让您可以从一开始就编写 .vue 文件,同时在开发阶段享受热模块替换 (HMR),并在生产环境中利用默认的服务器端渲染实现高性能应用。
Nuxt 没有供应商锁定,允许您将应用程序部署到 任何地方,甚至是边缘网络 (Edge)。
如果您想在浏览器中体验 Nuxt,可以在我们的在线沙盒中尝试一下。自动化与约定Nuxt 使用约定和特定的目录结构来自动化重复性任务,让开发者能够专注于功能开发。配置文件依然可以用来定制和覆盖其默认行为。
基于文件的路由: 根据您的 app/pages/ 目录结构定义路由。这可以简化应用程序的组织,避免手动配置路由的需要。代码分割: Nuxt 会自动将您的代码分割成更小的块,这有助于减少应用程序的初始加载时间。开箱即用的服务器端渲染: Nuxt 内置了 SSR 功能,因此您无需自行配置服务器。自动导入: 在各自的目录中编写 Vue 可组合函数 (composables) 和组件,无需手动导入即可使用,同时享受 Tree-shaking 和优化后的 JS 打包带来的好处。数据获取工具: Nuxt 提供了可组合函数来处理与 SSR 兼容的数据获取,以及多种不同的获取策略。零配置 TypeScript 支持: 通过我们自动生成的类型和 tsconfig.json,无需深入学习 TypeScript 即可编写类型安全的代码。预配置的构建工具: 我们默认使用Vite来支持开发过程中的热模块替换 (HMR),并以最佳实践为基础将您的代码打包用于生产环境。Nuxt 处理了这些繁琐的工作,并提供了前端和后端功能,让您可以专注于真正重要的事情:创建您的 Web 应用程序。
服务器端渲染 (SSR)Nuxt 默认内置了服务器端渲染 (SSR) 功能,无需您自行配置服务器,这对 Web 应用程序有很多好处
更快的初始页面加载时间: Nuxt 将完全渲染后的 HTML 页面发送到浏览器,可立即显示。这可以提供更快的感知加载速度和更好的用户体验 (UX),特别是在网络较慢或设备性能较弱的情况下。改进的 SEO: 搜索引擎可以更好地索引 SSR 页面,因为 HTML 内容是即时可用的,而无需依赖客户端 JavaScript 来渲染内容。在低性能设备上表现更好: 它减少了需要在客户端下载和执行的 JavaScript 数量,这对可能难以处理大型 JavaScript 应用的低性能设备非常有益。更好的可访问性: 内容在初始页面加载时即可立即获取,从而改善了依赖屏幕阅读器或其他辅助技术用户的可访问性。更易于缓存: 页面可以在服务器端进行缓存,通过减少生成和发送内容给客户端所需的时间,进一步提高性能。总而言之,服务器端渲染可以提供更快、更高效的用户体验,同时还能提升搜索引擎优化 (SEO) 和可访问性。
由于 Nuxt 是一个多功能的框架,它允许您通过 nuxt generate 将整个应用程序静态渲染到静态主机,通过 ssr: false 选项全局禁用 SSR,或者通过设置 routeRules 选项来实现混合渲染。
阅读更多内容请参考 Nuxt 渲染模式。服务器引擎Nuxt 服务器引擎Nitro解锁了全新的全栈能力。
在开发环境中,它使用 Rollup 和 Node.js workers 来处理您的服务器代码和上下文隔离。它还会通过读取 server/api/ 目录中的文件以及 server/middleware/ 中的中间件来生成您的服务器 API。
在生产环境中,Nitro 将您的应用和服务器构建为一个通用的 .output 目录。该输出非常轻量:代码经过压缩,并移除了除 polyfills 之外的所有 Node.js 模块。您可以将此输出部署到任何支持 JavaScript 的系统上,无论是 Node.js、Serverless、Workers、边缘端渲染还是纯静态部署。
阅读更多内容请参考 Nuxt 服务器引擎。生产就绪Nuxt 应用程序可以部署在 Node 或 Deno 服务器上、预渲染后托管在静态环境中,或者部署到 Serverless 和边缘计算提供商处。
阅读更多内容请参考 部署章节。模块化模块系统允许您使用自定义功能和第三方服务集成来扩展 Nuxt。
阅读更多内容请参考 Nuxt 模块概念。架构Nuxt 由不同的核心包:
核心引擎nuxt打包工具@nuxt/vite-builder, @nuxt/rspack-builder等等@nuxt/webpack-builder命令行界面@nuxt/cli服务器引擎nitro开发工具包@nuxt/kit我们建议阅读每个概念,以全面了解 Nuxt 的功能以及每个包的作用范围。