Nuxt 菜鸟入门学习笔记一：介绍与安装

Nuxt官网地址：https://nuxt.com/

介绍 Introduction

Nuxt 是一个免费的开源框架，以直观和可扩展的方式使用 Vue.js 创建类型安全、高性能和生产级的全栈 web 应用程序和网站。

我们所做的一切都是为了让您可以从一开始就编写.vue 文件，同时在开发中享受热模块替换，在生产中享受默认服务器端渲染的高性能应用程序。

自动化和惯例

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

• 基于文件的路由
  根据页面/目录的结构定义路由。这样可以更容易地组织您的应用程序，并避免手动路由配置的需要。

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

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

• 自动导入
  在各自的目录中写入 Vue 组合式函数和组件，无需导入即可使用，并具有树状结构和优化的 JS bundle 的优点。

• 数据获取工具
  Nuxt 提供了组合式函数处理 SSR 兼容性数据获取以及不同策略的组件。

• 零配置支持 TypeScript
  使用我们自动生成的类型和 tsconfig.json 编写类型安全的代码，而无需学习 TypeScript

• 配置构建工具
  我们默认使用 Vite 来支持开发中的热模块替换（HMR），并将您的代码与最佳实践打包应用于生产环境。

服务器端渲染

Nuxt 默认内置服务器端渲染（SSR）功能，无需自行配置服务器，这对网络应用程序有很多好处：

• 更快的初始页面加载时间
  Nuxt 向浏览器发送完全渲染的 HTML 页面，该页面可立即显示。这可以提供更快的页面加载时间和更好的用户体验（UX），特别是在较慢的网络或设备上。

• 改进搜索引擎优化 SEO
  搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容是立即可用的，而不是需要 JavaScript 在客户端呈现内容。

• 在低配置设备上性能更佳
  它减少了客户端需要下载和执行的 JavaScript 的数量，这对于处理大量 JavaScript 应用程序的低功率设备来说是有益的。

• 更好的无障碍性
  在初始页面加载时，内容立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。

• 缓存更容易
  页面可以在服务器端缓存，这样可以减少生成和向客户端发送内容所需的时间，从而进一步提高性能。

总的来说，服务器端渲染可以提供更快、更高效的用户体验，并提高搜索引擎优化和可访问性。
由于 Nuxt 是一个多功能框架，因此您可以使用nuxt generate将整个应用程序静态渲染到一个静态主机，使用ssr: false选项全局禁用 SSR，或者通过设置routeRules选项利用混合渲染。

服务器引擎

Nuxt 服务器引擎Nitro释放了新的全栈能力。

在开发过程中，它使用 Rollup 和 Node.js Worker 进行服务器代码和上下文隔离。它还通过读取server/api/中的文件和server/middleware/中的服务器中间件来生成服务器 API。

在生产中，Nitro 将您的应用程序和服务器构建到一个通用的.output目录中。该输出是轻量级的：经过精简并去除任何 Node.js 模块（polyfills 除外）。您可以在任何支持 JavaScript 的系统上部署该输出，包括 Node.js、Serverless、Workers、Edge-side 渲染或纯静态。

生产就绪

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

模块化

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

架构

Nuxt 由不同的核心软件包组成：

• Core Engine: nuxt
• Bundlers: @nuxt/vite-builder and @nuxt/webpack-builder
• Command line interface: nuxi
• Server engine: nitro
• Development kit: @nuxt/kit
• Nuxt 2 Bridge: @nuxt/bridge

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

安装 Installation

准备

• Node.js - v16.10.0 或者更高版本
• 文本编辑器 - 我们推荐使用 Visual Studio Code，并安装 Volar 扩展。
  

安装

• 创建项目
  • npx 安装 npx nuxi@latest init <project-name>
  • pnpm 安装 pnpm dlx nuxi@latest init <project-name>
• 进入项目根目录，安装依赖：
  • yarn yarn install
  • npm npm install
  • pnpm pnpm install （注意：pnpm install 之前确保配置文件 .npmrc中有 shamefully-hoist=true）
• 启动开发环境服务
  • yarn yarn dev -o
  • npm npm run dev -- -o
  • pnpm pnpm dev -o

启动成功将在默认浏览器自动打开http://localhost:3000