参考: NuxtJs官网

作为同react Next.js一样的竞品, 做一定了解

介绍

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

概念

配置约定

Nuxt采用很多约定俗称的设定,以便快速进入开发状态

  • 文件路由: 根据pages/目录的结构定义路由

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

  • 服务器渲染: Nuxt 带有内置的 SSR 功能,因此您不必自己设置单独的服务器。

  • 自动导入: 在各自的目录中编写 Vue 可组合项和组件并使用它们,而无需导入它们,并具有 tree-shaking 和优化的 JS 包的优点。

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

  • 天然TS支持: 使用我们自动生成的类型和tsconfig.json编写类型安全的代码,而无需学习 TypeScript

  • 构建工具: 我们默认使用Vite来支持开发中的热模块替换 (HMR),并通过内置的最佳实践捆绑您的代码以进行生产。

服务器渲染

Nuxt 默认内置了服务器端渲染(SSR)功能

优点:

  • 优化的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 模块(除了 polyfills)中删除。您可以将此输出部署在任何支持 JavaScript 的系统上,无论是 Node.js、Serverless、Workers、边缘渲染还是纯静态。

生产就绪

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

模块化

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

建筑学

Nuxt由不同的核心包组成:

  • 核心引擎

  • 捆绑器

  • 命令行界面

  • 服务器引擎

  • 开发套件

ps: 对于NuxtJs初步的了解

安装

先决条件

工具

说明

Node.js

v18.0.0或更高版本

编辑器

Visual Studio Code

运行命令

npx nuxi@latest init <project-name> // 

运行以上命令时可能会报错

Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

但可以直接访问链接 https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json

{
  "name": "v3",
  "defaultDir": "nuxt-app",
  "url": "https://nuxt.com",
  "tar": "https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3"
}

示例工程地址为: https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3

下载后解压安装运行

官方问题出处及解决方案: https://github.com/nuxt/cli/issues/159