Nuxt快速学习开发(一)-Nuxt3介绍、安装错误处理

898 阅读3分钟

介绍

Nuxt 是一个免费的开源框架,具有直观且可扩展的方式,可以使用创建类型安全、高性能和生产级的全栈 Web 应用程序和网站,同时Nuxt也具有以下特点:

自动化和约定

-   基于文件的路由: 根据[目录]结构定义路由。
-   代码拆分:  Nuxt 会自动将您的代码拆分为更小的块,这有助于减少应用程序的初始加载时间。
-   开箱即用的服务器端渲染:  Nuxt 自带 SSR 能力,所以你不必自己架设单独的服务器。
-   自动导入: 在各自的目录中编写 Vue 可组合项和组件并使用它们,而无需导入它们,具有 tree-shaking 和优化的 JS 包的好处。
-   数据获取实用程序:  Nuxt 提供可组合项来处理与 SSR 兼容的数据获取以及不同的策略。
-   零配置 TypeScript 支持: 编写类型安全的代码,而无需使用我们自动生成的类型来学习 TypeScript 和`tsconfig.json`
-   配置的构建工具: 默认使用[Vite来支持开发中的热模块替换 (HMR),并将您的生产代码与内置的最佳实践捆绑在一起。]

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

服务器端渲染

Nuxt 默认自带服务器端渲染(SSR)能力,无需自己配置服务器

-   更快的初始页面加载时间:  Nuxt 向浏览器发送一个完全呈现的 HTML 页面,该页面可以立即显示。这可以提供更快的感知页面加载时间和更好的用户体验 (UX),尤其是在较慢的网络或设备上。
-   改进的 SEO: 搜索引擎可以更好地索引 SSR 页面,因为 HTML 内容立即可用,而不需要 JavaScript 在客户端呈现内容。
-   在低功率设备上有更好的性能: 它减少了需要在客户端下载和执行的 JavaScript 数量,这对于可能难以处理繁重的 JavaScript 应用程序的低功率设备来说是有益的。
-   更好的可访问性: 内容在初始页面加载时立即可用,提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
-   更轻松的缓存: 页面可以缓存在服务器端,这可以通过减少生成内容并将内容发送到客户端所需的时间来进一步提高性能。

服务器引擎

Nuxt 服务器引擎Nitro解锁了新的全栈功能。

在开发中,它使用 Rollup 和 Node.js worker 来实现服务器代码和上下文隔离。它还通过server/api/server/middleware/进行定义路由中间件.

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

部署

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

模块化

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

nuxt3安装

先决条件

终端运行

  • npx nuxi init <project-name> 或 pnpm dlx nuxi init <project-name>
  • code <project-name>
  • npm install 或 yarn install
  • npm run dev -- -o 或 pnpm dev -o

# nuxt3项目初始化失败

image.png

  • 问题原因:ip地址raw.githubusercontent.com [DNS服务器]把要访问的网站域名解析成其指定的IP地址失败
  • 解决方法:通过hosts添加ip地址,我的是window系统路径为C:\Windows\System32\drivers\etc,找到hosts通过记事本打开后添加保存

image.png 保存修改后,重新运行 npx nuxi init 项目名,下载成功,如下图:

image.png