1.introduction(引言)

引言

Nuxt是一个免费且开源的框架,提供了一种直观且可扩展的方式来创建基于Vue.js的类型安全、高性能且生产级别的全栈Web应用程序和网站。我们已经做好了一切,让您可以从头开始编写.vue文件,在开发中享受热模块替换,在生产中默认使用服务器端渲染,从而获得高性能的应用程序。Nuxt没有供应商锁定,使您可以在任何地方部署应用程序,甚至可以部署到边缘节点。


自动化和惯例

Nuxt使用惯例和一种具有见解的目录结构来自动化重复任务,使开发人员可以专注于推动功能。配置文件仍然可以自定义和覆盖其默认行为。

  • 基于文件的路由:根据页面目录结构定义路由。这可以使组织应用程序变得更容易,避免手动配置路由的需要。

  • 代码分割:Nuxt自动将您的代码分割成较小的块,这有助于减少应用程序的初始加载时间。

  • 开箱即用的服务器端渲染:Nuxt带有内置的SSR功能,因此您无需自己设置单独的服务器。

  • 自动导入:在各自的目录中编写Vue组件和组合,无需导入即可使用它们,并获得树摇和优化JS包的好处。

  • 数据获取实用程序:Nuxt提供组合来处理SSR兼容的数据获取以及不同的策略。

  • 零配置TypeScript支持:编写类型安全的代码,无需学习TypeScript,我们提供自动生成的类型和tsconfig.json。

  • 配置的构建工具:我们默认使用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 workers 处理您的服务器代码和上下文隔离。它还通过读取 server/api/ 目录中的文件生成您的服务器 API 和 server/middleware/ 中的中间件。

在生产中,Nitro 将您的应用程序和服务器构建成一个通用的 .output 目录。这个输出非常轻量化:被缩小并从任何 Node.js 模块中删除(除了 polyfills )。您可以将此输出部署到支持 JavaScript 的任何系统上,包括 Node.js、Serverless、Workers、边缘渲染或纯静态。

详细了解 Nuxt 服务器引擎


适合生产环境

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

部署部分中了解更多信息。


可扩展

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

了解更多有关模块的信息。


架构

Nuxt 由不同的核心包组成:

  • 核心引擎:nuxt

  • 打包工具:@nuxt/vite-builder 和 @nuxt/webpack-builder

  • 命令行界面:nuxi

  • 服务器引擎:nitro

  • 开发工具包:@nuxt/kit

  • Nuxt 2 桥接器:@nuxt/bridge

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


准备尝试Nuxt?

Nuxt 是您的 Vue.js 项目的支柱,为构建项目提供结构,使您可以自信地构建项目并保持灵活性。

使用强大的模块生态系统和钩子引擎进行扩展,它使连接 REST 或 GraphQL 端点、喜欢的 CMS、CSS 框架等变得容易。PWA 和 AMP 支持距离您的 Nuxt 项目只有一个模块之遥。

准备好尝试了吗?请前往安装部分


原文档地址:https://nuxt.com/docs/getting-started/introduction


微信 遇到疑问可加微信进行反映