Nuxt3-项目-全-

Nuxt3 项目（全）

原文：zh.annas-archive.org/md5/c48f712983267c8142bd352d97a502a4

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

这本书是掌握 Nuxt 3 的完整指南，Nuxt 3 是一个简化 Vue.js 开发的渐进式框架。通过一系列精心设计的章节，你将通过构建实际应用逐步探索框架的强大功能。从简单的“Hello Nuxt”应用开始，每一章都逐步介绍更复杂的概念，如路由、布局和高级 SEO 技术。到结束时，你将自信地应对现实世界的挑战，开发可扩展的应用，并利用 Nuxt 3 的力量为你的项目服务。

本书面向对象

如果你是一名初级或中级 Vue.js 开发者，对构建 Web 应用有基本了解，并希望扩展你在 Web 开发领域的专业知识，这本书适合你。它将指导你学习 Nuxt，解决实际问题，并实施最佳实践。希望刷新知识或探索 Nuxt 的高级开发者也可以从这本书中受益。

本书涵盖内容

第一章, 为基本的“Hello Nuxt”应用设置 Nuxt 3 环境，展示了如何设置 Nuxt 3 环境并创建一个基本的“Hello Nuxt”应用以验证设置成功，为更复杂的项目奠定基础。

第二章, 使用 TailwindCSS 构建简单组合并深入了解 Nuxt 3 的项目结构，探讨了如何构建一个简单的组合，利用 TailwindCSS 进行样式设计，并发现 Nuxt 3 项目结构的复杂性。

第三章, 构建房地产列表项目以掌握路由、视图、布局和插件，深入探讨了如何开发房地产列表项目以理解 Nuxt 3 的动态和嵌套路由、页面布局和插件架构。

第四章, 构建天气仪表板以学习数据获取和状态管理，指导你创建天气仪表板，重点关注 Nuxt UI 组件，掌握数据获取，并使用 Pinia 进行状态管理。

第五章, 构建个人发布空间并实现身份验证，探讨了如何使用 Nuxt 3 和 Supabase 创建一个带有用户身份验证的个人发布平台，涵盖用户注册、登录和安全的帖子管理。

第六章, 在优化 SEO 的同时增强食谱分享网站使用 Nuxt 3，介绍了如何通过高级 Nuxt 3 技术增强食谱分享网站的 SEO，以提升搜索引擎可见性和有机流量。

第七章, 构建一个测验游戏应用以学习测试，考察了如何构建和测试一个测验游戏应用，重点关注单元测试和端到端测试（E2E）以确保功能性和可靠性。

第八章，在 Nuxt 3 单仓库中创建自定义翻译模块，深入探讨了在单仓库设置中使用 Nuxt 3 构建自定义翻译模块，并探讨了模块化系统架构对大型应用的益处。

为了充分利用本书

您应该具备 JavaScript 和 Vue.js 的基本理解，因为 Nuxt 3 是基于这些技术构建的。熟悉 ES6 语法、Vue 组合 API 以及异步编程等概念将特别有用。建议您在计算机上安装 Node.js 和 pnpm，因为本书中的示例和项目设置依赖于这些工具。

必需工具	版本详情
Node.js	>=18.0.0
Pnpm	>= 7
Visual Studio Code (推荐) 或任何其他 IDE

如果您使用的是本书的数字版，我们建议您亲自输入代码或从 本书的 GitHub 仓库（下一节中提供链接） 获取代码。这样做将帮助您避免与代码复制和粘贴相关的任何潜在错误。

下载示例代码文件

您可以从 GitHub 下载本书的示例代码文件github.com/PacktPublishing/Nuxt-3-Projects。如果代码有更新，它将在 GitHub 仓库中更新。

我们还提供了来自我们丰富的图书和视频目录的其他代码包，可在github.com/PacktPublishing/找到。查看它们吧！

代码实战

本书的相关代码实战视频可在packt.link/hN2JZ查看。

使用的约定

本书使用了多种文本约定。

文本中的代码：表示文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称。以下是一个示例：“首先，将新创建的模块目录从my-module重命名为translation，以更好地反映其目的。”

代码块应如下设置：

// packages/translation/src/module.ts
export default defineNuxtModule<ModuleOptions>({  meta: {
    name: 'translation',
    configKey: 'translation'
  }
  // … rest of code
})

任何命令行输入或输出都应如下编写：

$ pnpm --filter demo-website add --workspace translation

粗体：表示新术语、重要单词或屏幕上看到的单词。例如，菜单或对话框中的单词以粗体显示。以下是一个示例：“对于关于我部分，我们采用了类似的方法。”

小贴士或重要提示

看起来是这样的。

联系我们

欢迎读者反馈。

总体反馈：如果您对本书的任何方面有任何疑问，请通过电子邮件发送至 customercare@packtpub.com，并在邮件主题中提及书名。

勘误: 尽管我们已经尽一切努力确保内容的准确性，但错误仍然可能发生。如果您在这本书中发现了错误，如果您能向我们报告，我们将不胜感激。请访问www.packtpub.com/support/errata并填写表格。

盗版: 如果您在互联网上以任何形式发现了我们作品的非法副本，如果您能提供位置地址或网站名称，我们将不胜感激。请通过 copyright@packt.com 与我们联系，并提供材料的链接。

如果您有兴趣成为作者：如果您在某个领域有专业知识，并且您有兴趣撰写或为书籍做出贡献，请访问authors.packtpub.com。

分享您的想法

一旦您阅读了Nuxt 3 Projects，我们很乐意听听您的想法！请点击此处直接进入此书的亚马逊评论页面并分享您的反馈。

您的评论对我们和科技社区非常重要，并将帮助我们确保我们提供高质量的内容。

下载此书的免费 PDF 副本

感谢您购买此书！

您喜欢在旅途中阅读，但无法携带您的印刷书籍到任何地方吗？

您购买的电书是否与您选择的设备不兼容？

别担心，现在，每购买一本 Packt 书籍，您都可以免费获得该书的 DRM 免费 PDF 版本。

在任何地方、任何设备上阅读。直接从您最喜欢的技术书籍中搜索、复制和粘贴代码到您的应用程序中。

优惠不会就此停止，您还可以获得独家折扣、时事通讯和每日免费内容的每日电子邮件。

按照以下简单步骤获取福利：

1. 扫描二维码或访问以下链接

packt.link/free-ebook/9781837632541

1. 提交您的购买证明

2. 就这些！我们将直接将您的免费 PDF 和其他福利发送到您的电子邮件。

第一章：为基本“Hello Nuxt”应用设置您的 Nuxt 3 环境

随着时间的推移，Web 开发经历了变革性的旅程，从静态网页发展到提供无缝用户体验的动态应用。随着对更互动和性能更优的 Web 应用的需求增长，需要能够简化并简化开发过程的框架的需求变得明显。这就是 Nuxt 诞生的背景——一个旨在以尽可能直观的方式构建 Vue.js 应用的框架。

Nuxt 3，框架的最新版本，在 Web 开发方面迈出了重要一步。对于那些多年来一直从事前端开发的人来说，很明显 Nuxt 3 带来了很多好处。除了基本功能，如自动路由和服务器端渲染之外，Nuxt 3 还集成了 TypeScript，提供更好的、无错误的编码。新的 Nitro 引擎提升了性能，使应用程序运行更快、更流畅。借助 Vue 3 的 Composition API，构建组件变得更加直观。此外，改进的模块和新的 DevTools 使开发更加高效。简而言之，Nuxt 3 提供了一套强大的工具，使 Web 开发更快、更简单、更稳健。

在本章中，您将进入 Nuxt 3 的世界，深入了解其起源，探索其背后的思想和核心使命。您将清楚地了解是什么使 Nuxt 独特，以及为什么它成为全球许多开发者的首选。随着您的进步，您还将采取实际步骤设置您第一个 Nuxt 应用程序。到本章结束时，您不仅对 Nuxt 3 的基础及其潜在原则有了更清晰的认识，而且还有一个正在运行的 Nuxt 应用程序，为后续章节的深入探讨奠定了基础。

在本章中，我们将涵盖以下主要主题：

• 理解本书中的代码内容

• Nuxt 3 简介

• Nuxt 的架构和功能

• 安装和设置 Nuxt 3 环境

• 创建您的第一个“Hello Nuxt”应用

• 推荐扩展

技术要求

为了确保我们在设置和探索 Nuxt 3 的过程中获得无缝体验，必须满足某些先决条件。以下技术和安装是必需的：

• Node.js：v18.10.0 或更高版本。

• 包管理器：虽然安装 Node.js 默认提供 npm，但我更喜欢 pnpm，因为它通过在项目间共享包来提高磁盘空间使用效率，并确保依赖项永远不会提升，从而实现更可预测的构建。

• 文本编辑器：我推荐使用带有 Vue – Official Extension 的 Visual Studio Code (VS Code)，但 https://www.jetbrains.com/webstorm/ 或任何其他编辑器都可以很好地工作

• 终端：您需要一个终端来运行 Nuxt 命令。

本章的代码文件可以在github.com/PacktPublishing/Nuxt-3-Projects/tree/main/chapter01找到。

本章的 CiA 视频可以在packt.link/UhVbH找到

Nuxt 3 简介

在网络开发领域待了一段时间后，你会了解到进化的重要性。这就像观察一个城市的发展。最初只是一些建筑（或者在我们的例子中，是静态网页），现在已经变成了一个繁华的大都市，有摩天大楼、相互连接的交通系统和充满活力的活动中心。同样，我们的网络开发工具也随着时代的发展而发生了变化。Nuxt 在这个工具城市中屹立不倒，尤其是对于那些使用 Vue.js 进行创作的我们。本节将作为 Nuxt 3 的导游，带您穿越其历史街道，繁华的商业区，以及那些让像我们这样的开发者点头称赞的建筑奇迹。

网络开发的演变

在网络发展的早期，网站很简单。把它们想象成手绘地图的数字等价物。它们会告诉你方向，但旅程基本上取决于你自己。随着时间的推移，随着网络的不断发展，需求变得更加复杂。网站变成了网络应用，这些应用需要是动态的、响应式的和交互式的。不再仅仅是展示信息；它关乎参与，关乎创造体验。在这个动态的景观中，Vue.js 作为一个灯塔出现，简化了复杂性，让开发者的生活变得稍微容易一些。但正如任何经验丰富的开发者都会告诉你的，总有改进和进化的空间。

Nuxt 的诞生

这里有一个许多人都能够感同身受的场景：你正深入一个 Vue.js 项目，欣赏其优雅之处，但有时你会想，“这能更加精简吗？一些重复的任务能自动化吗？”这种对效率的追求正是 Nuxt 进入故事的地方。由有远见的 Chopin 兄弟构想，Nuxt 是带有翅膀的 Vue.js。它不仅仅是为了添加功能；它关于智能集成，关于使整个开发过程更加流畅。想象一下，你不需要为每个页面手动设置路由，或者有现成的解决方案来解决 SEO 挑战。Nuxt 就是那种新颖的视角，那种对挑战的创新方法，我们将之视为“只是过程的一部分”。

为什么选择 Nuxt？

简而言之，如果你正在使用 Vue.js，Nuxt 就是你的下一步逻辑选择。它带来了一系列增强功能。Nuxt 内置了诸如自动化路由、中间件支持、通用（SSR 和 SPA）渲染以及灵活布局等工具。这意味着更少的样板代码和更高的生产力。Nuxt 无缝扩展了 Vue 的能力，为构建稳固的 Web 应用提供了一个集成、高效的解决方案。

既然我们已经探索了 Nuxt 在 Vue.js 生态系统中的独特优势，我们的下一步是深入研究 Nuxt 3 的架构元素和基础概念。

Nuxt 的架构和原则

在不断发展的网络开发领域，了解一个工具的内部工作原理可能是掌握它的关键。Nuxt 3，以其复杂的设计和强大的功能，也不例外。对于我们这些经验丰富的人来说，解开这样的复杂性不仅是一种必要性，也是一种热情。让我们开始深入探索 Nuxt 3，剥去层层面纱，揭示其背后的原则和架构。

基于 Vue 构建

在其核心，Nuxt 3 是建立在 Vue.js 之上的。虽然反应性和基于组件的架构已经进入了许多现代框架，但 Vue.js 区别于其他框架的是其易用性。它被设计成新手和经验丰富的开发者都能轻松掌握其概念。但除了框架本身之外，Vue 的充满活力和支持性的社区发挥着重要作用。这种积极的社区反馈为 Nuxt 3 创造了完美的基础，使其能够提供丰富的开发体验。

通用渲染和静态站点生成

记得那些我们进入一个网站，然后会有一个短暂的空白时刻，内容神奇地出现的日子吗？那就是客户端渲染在起作用。虽然它有其优点，但这种方法有时感觉像是走进一个昏暗的房间，等待灯光慢慢亮起。通用渲染通过合并服务器端和客户端渲染的最好之处，改变了游戏规则。采用这种方法，内容在服务器上预先渲染，进入网站时即可立即访问。一旦页面加载完成，客户端脚本“水合”页面，实现动态交互并提升用户体验。这些好处？

• 更快的初始页面加载

• 改进的 SEO

• 更好的整体用户体验

谈及流畅的网页体验，你是否注意到一些网站运行得很快，似乎没有任何故障？其中许多是静态网站。它们就像一打开就能立即使用的网页，无需额外的加载时间。但现代静态网站不仅仅是提供固定内容；它们可以像任何其他网站一样动态和交互。Nuxt 的静态站点生成（SSG）功能意味着开发者可以享受到静态网站（速度和安全）和网页应用的动态性。使用 Nuxt，构建静态网站就像构建任何其他应用程序一样直观，但增加了性能和安全的额外优势。

性能优化

在网络开发的世界里，速度不仅仅是一种奢侈，更是一种必需品。用户期望网页快速加载，搜索引擎也会奖励快速加载的网站以更好的排名。认识到这一点，Nuxt 3 已经被设计为以性能为核心。但这意味着对开发者和用户来说意味着什么呢？让我们分析一下 Nuxt 3 使用的几个关键性能优化技术，以增强开发者和用户体验：

• 代码拆分（Code splitting）：Nuxt 3 利用 Vite 和 Rollup 智能地拆分代码，而不是发送一个大的 JavaScript 包。这意味着用户只需下载当前页面所需的代码，从而减少加载时间。

• 摇树干（Tree shaking）：不必要的代码会使应用程序膨胀。摇树干确保只包含最终包中使用的代码。这就像修剪树木的枝条以保持其健康和活力。

• 链接预取（Link prefetching）：当用户浏览页面时，Nuxt 3 已经在努力预取链接页面的资源。这种主动方法意味着后续页面几乎可以立即加载。

Nuxt 在底层使用 Vite。Vite 是一个改变我们思考网络开发方式的工具。它几乎可以立即启动，这意味着不再需要等待开始工作。当你更改代码时，Vite 会立即更新它，这样你就可以立即看到你的更改。它有一个直接的构建系统，这意味着花更少的时间去弄清楚事情，有更多的时间进行编码。此外，它被设计成在各个方面都很快，使整个开发过程更加顺畅。

在本节中，我们介绍了 Nuxt 3 的架构、其在渲染方面的优势以及其对性能的关注。随着我们继续前进，我们将从理论转向实践操作，指导你设置你的第一个 Nuxt 3 环境。

安装和设置 Nuxt 3 环境

在深入研究 Nuxt 3 之前，设置一个有利的环境是至关重要的。把它想象成在种植树木之前准备土壤。准备得越好，树木在成长过程中就会越健康。在本节中，我们将带你了解前置条件和安装步骤，确保你有一个坚实的基础开始你的 Nuxt 3 之旅。

前置条件

要使用 Nuxt 3，你需要安装和设置一些东西。根据 Nuxt 3 官方网站，以下是需要满足的前置条件：

• Node.js：确保你已经安装了 Node.js，并且它的版本至少是 18.10.0。要检查 Node.js 是否已安装以及其版本，请运行以下命令：

  $ node –v
  

  如果你看到一个版本号，这意味着 Node.js 已安装。如果它低于 18.10.0 或者 Node.js 没有安装，你可以从官方 Node.js 网站下载最新版本：nodejs.org/。

• 包管理器：虽然 npm 与 Node.js 一起捆绑，但在此指南中，我们将使用 pnpm。它高效且快速，并确保包在项目间共享。要安装它，请运行以下命令：

  $ npm install -g pnpm
  

• 代码编辑器：虽然您可以使用任何代码编辑器，但我们推荐使用 VS Code。它功能丰富，支持大量扩展，并且在开发者社区中得到广泛采用。

在本节中，您设置了您的 Nuxt 3 环境。接下来，您将构建一个“Hello Nuxt”应用程序并探索基本的项目结构。

创建您的第一个“Hello Nuxt”应用程序

在本节中，我们将一起迈出第一步 – 那就是创建您自己的第一个 Nuxt 应用程序。到那时，您将拥有一个运行中的应用程序，并对 Nuxt 项目结构有一个基础的了解。

初始化 – 创建新 Nuxt 项目的步骤

这里是初始化的步骤：

1. 通过为您的项目指定一个空间来创建一个新的入门项目。打开您的终端（macOS/Linux）或命令提示符（Windows），并运行以下命令：

   pnpm:
   

图 1.1：使用 pnpm 作为包管理器

1. 在安装依赖项之后，您还可能被询问是否要初始化 Git 仓库。如果您在此过程中不想设置 Git 仓库，当出现此问题时，可以选择不设置。

2. 一旦项目创建完成，您将收到类似以下的消息：

图 1.2：创建项目后

1. 接下来，我们必须前往创建项目的文件夹：

   $ cd hello-nuxt
   $ pnpm i
   

   注意，您仍然可以使用 npm 或 Yarn 安装依赖项。

2. 要启动项目，我们可以运行以下命令：

   $ pnpm dev
   

3. 此命令以开发模式启动您的 Nuxt 应用程序。它针对开发者体验进行了优化，这意味着以下说法是正确的：

   1. 热模块替换（HMR）已激活，因此您的文件中的更改将自动更新应用程序，而无需完全重新加载页面

   2. 错误和警告会在控制台以及通常在您的应用程序上显示的覆盖层中显示

   将启动一个本地开发服务器，通常可通过 localhost:3000 访问。

4. 构建成功后，终端应显示以下消息：

图 1.3：构建输出

1. 点击链接，哇！您已经有了您的第一个“Hello Nuxt”应用程序！

图 1.4：浏览器上的 Nuxt 应用程序

Nuxt CLI 以一个基本的 Nuxt 应用程序作为我们项目的起点。这包括一个内置的组件，称为 NuxtWelcome。在接下来的章节中，我们将探讨如何修改和扩展这个基础，使其符合我们的特定需求。

1. 最后，让我们打开 VS code 并探索我们的新“Hello Nuxt”项目！

   $ code .
   

   这将在 VS Code 中打开当前目录。您可能需要设置 VS Code，以便可以从命令行启动。有关如何设置的说明，请参阅code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line。

现在 VS Code 已打开，让我们发现初始化后创建的默认项目结构。

默认项目结构

在 Nuxt 的世界中，一个井然有序的结构从一开始就欢迎您。这种精心设计的设置确保了清晰和效率，引导开发者通过逻辑流程。虽然我们将深入研究启动项目中提供的目录，但重要的是要注意，随着您的项目增长和发展，其他文件夹，如页面、插件、中间件等，也将发挥作用。不要担心，这些将在后续章节中深入探讨。

但现在，让我们熟悉一下 Nuxt 3 项目的底层结构：

• README.md：大多数项目的起点。此文件传统上提供简短介绍，可能包括基本设置或使用说明，使新用户更容易上手。

• server：这里存放自定义服务器端逻辑，增强 Nuxt 的默认服务器功能。我们将在未来的章节中深入探讨其潜力。

• tsconfig.json：为 Nuxt 定制的 TypeScript 配置。无需深入了解其细节。

• package.json：在脚本中，您将找到以下内容：

  • dev：启动开发环境，启用 HMR

  • build：启动带有实时重新加载的本地开发环境

  • generate：对于使用 SSG 的应用程序，此脚本生成应用程序的静态页面

  • preview：在本地预览生成的静态站点

  • postinstall：安装后准备 Nuxt 环境

• .npmrc：保存 npm 的配置设置。无需深入了解其细节。

• Public：静态资产的避难所，您希望 Vite 不要对其进行处理。

• pnpm-lock.yaml：对于 pnpm 用户至关重要，此文件确保跨环境一致地安装包。如果您使用 npm，可能会找到 package-lock.json；如果您使用 Yarn，可能会找到 yarn.lock。

• nuxt.config.ts：您 Nuxt 项目的基石。此配置文件协调应用程序的各个方面，从全局 CSS 到插件。

• App.vue：您应用程序的核心和灵魂。作为根 Vue 组件，它为应用程序的其他组件设定了舞台：

图 1.5：项目结构

我们刚刚设置了我们的第一个“Hello Nuxt”应用程序，并对其结构进行了初步了解。接下来，我们将介绍一些实用的扩展，使我们的 Nuxt 之旅更加顺畅。

推荐扩展

VS Code 市场提供了一系列旨在提高开发体验的扩展程序。对于使用 Nuxt 的人来说，有一些特定的扩展程序脱颖而出，证明了它们在日常编码任务中的价值。在本节中，我们将探讨一些针对 Nuxt 的顶级扩展程序，突出它们如何使你的开发更加顺畅和高效：

• Vue - 官方

• Nuxtr

• Vue VSCode Snippets

• 与 Vue 无关的扩展

让我们详细地了解一下。

Vue - 官方

Vue - 官方是 VS Code 的扩展程序，它为 Vue 3 项目提供了增强支持。作为 Vue 开发者的综合工具集，Vue - 官方提供了以下功能：

• 在你的 Vue 组件中定义的 ref 值为 name: String。如果你错误地将数字分配给它，扩展程序将突出显示这种差异，指示类型不匹配：

图 1.6：Vue – 官方：TypeScript 支持

• 在你的 Vue 组件中，当你开始在模板中输入 {{ me... }} 时，扩展程序会建议自动完成为 {{ message}}:

图 1.7：Vue – 官方：模板插值

• .vue 文件中，<script> 部分可能突出显示为一种颜色方案，而 <template> 和 <style> 部分将具有不同的调色板，这使得它们之间的区分更加容易。

• 将 firstName 重命名为 givenName，Vue 官方扩展可以帮助你在组件中跨名称重命名，确保一致性。

• <script> 部分没有适当的缩进或间距，使用 Vue 官方扩展与 Prettier 的集成可以自动格式化代码，使其遵循最佳实践和一致的样式。

Nuxtr

Nuxtr 是 Nuxt.js 项目的友好编码伴侣。它包含了许多实用工具和命令，使你的编码会话更加顺畅。以下是其核心提供的功能概述：

• nuxtr: create。你将看到可以创建的 Nuxt 文件和文件夹列表，此时你可以选择所需的文件：

图 1.8：Nuxtr – 创建项目文件和文件夹

• 运行 Nuxt 命令：只需在命令面板中输入命令的名称：

图 1.9：Nuxtr – 运行 Nuxt 命令

• 通过你的状态栏激活 Nuxt DevTools：Nuxt DevTools 是任何 Nuxt 开发者的救命稻草。它为你提供了对应用程序组件的清晰视图，让你能够实时查看状态变化，提供性能指标，甚至跟踪事件。扩展程序与 Nuxt > 3.4.0 兼容。你可以轻松地从状态栏激活它。扩展程序识别你的 Nuxt.js 版本，并在需要时建议更新。

• 设置 CSS 框架和代码检查器：你可以集成各种 CSS 框架（Tailwind CSS、UnoCSS 和 Vueitfy），以及代码检查器（Stylelint 和 Eslint）：

图 1.10：设置 CSS 框架和代码检查器

正如我们所见，这些扩展不仅仅是附加组件；它们是能够显著简化你的 Nuxt 开发流程的必要工具。

摘要

在本章中，我们深入探讨了 Nuxt 3 的变革性世界及其在现代网络开发中的作用。我们首先讨论了其架构和内置的性能优化，包括代码拆分、摇树优化和链接预取。我们还提到了其服务器端渲染和静态生成页面（SSG）的能力。然后，我们逐步介绍了设置 Nuxt 3 环境的步骤，包括创建“Hello Nuxt”应用的前置条件和初始化步骤。我们还体验了 Nuxt 项目的结构，并讨论了一些推荐的 VS Code 扩展来增强开发体验。

在下一章中，我们将使用 Nuxt 3 和 Tailwind CSS 构建一个简单的个人作品集网站，进一步丰富我们对框架的实践经验。

实践问题

设置 Nuxt 3 环境需要哪些先决条件？

• 初始化新的 Nuxt 3 项目时使用哪些命令？

• 解释 Nuxt 3 中服务器端渲染的优点。

• nuxt.config.ts 文件在 Nuxt 项目中扮演什么角色？

• 描述 Nuxt 3 应用的默认项目结构。

• 你如何使用终端在 VS Code 中打开你的 Nuxt 项目？

• 在使用 Nuxt 处理 VS Code 时，有哪些推荐的扩展？

• Nuxt 3 是如何从建立在 Vue.js 之上获益的？

• 解释 Nuxt 3 如何处理静态生成页面（SSG）。

进一步阅读

• Nuxt 官方文档：nuxt.com/docs/getting-started/introduction

• 渲染模式：nuxt.com/docs/guide/concepts/rendering

• Nuxt 的工作原理：nuxt.com/docs/guide/going-further/internals

• TypeScript 与 Nuxt：nuxt.com/docs/guide/concepts/typescript

• Nuxt 的 VS Code 扩展：masteringnuxt.com/blog/the-best-vscode-extensions-for-nuxt-developers

第二章：使用 Tailwind CSS 和 Nuxt 3 项目结构深入探究构建简单投资组合

在本章中，我们将结合 Nuxt 3 的强大功能和 Tailwind CSS 的风格效率，构建一个优雅展示您的项目和技能的投資組合。Tailwind CSS 以其以实用工具为主的理念而闻名，使我们能够用最少的自定义 CSS 创建复杂的设计，从而简化开发过程。当与以开发者友好的抽象和强大的 Vue.js 功能著称的 Nuxt 3 结合使用时，我们装备了一个强大的工具集，以构建不仅功能卓越而且视觉上吸引人的投资组合。

在本章中，我们将精心创建一个投资组合，确保每个组件和样式都是精心制作且具有目的性的。我们的目标是确保您的项目不仅得到展示，而且以一种与每位访客产生共鸣的方式讲述，为他们提供不仅仅是视觉体验，而且是一次通过您的技术努力和成就的旅程。

在本章中，我们将涵盖以下主要主题：

• 设置和集成 TailwindCSS 3

• 创建网站布局并自定义字体

• 管理位于 assets 文件夹中的图片

• 创建 ProjectShowcase 和 SkillChip 组件

• 在组件的作用域内直接进行样式化

• 创建一个 useScrollTo 可组合组件

技术要求

本章的代码文件可以在 github.com/PacktPublishing/Nuxt-3-Projects/tree/main/chapter02 找到。

本章的 CiA 视频可以在 packt.link/kCqMV 找到

必要的背景知识 - 什么是 Tailwind CSS？

在我们开始编码之旅之前，让我们装备一些关于 Tailwind CSS 的关键知识，Tailwind CSS 是一个以实用工具为主的 CSS 框架，它提供了低级别的实用类，可以直接在您的标记中构建设计。与其他提供预定义组件的 CSS 框架不同，Tailwind 允许在您的设计实现中拥有更多的灵活性和定制性。

想要更深入地了解 Tailwind CSS 及其功能，您可以访问 Tailwind CSS 的官方网站：tailwindcss.com/.

接下来，让我们了解如何设置和集成 Tailwind CSS 到您的项目中。

设置和集成 Tailwind CSS

我们将通过从头开始创建一个新的 Nuxt 3 项目来开始我们的投资组合之旅。

创建一个新项目

如我们在上一章所学，让我们创建一个名为 my-portfolio 的新 Nuxt 3 项目，并在 VS Code 中打开它以继续操作。

在我们进一步导航之前，确保我们的设置成功是明智的。让我们启动我们的开发服务器，并查看我们项目的初始状态：

$ pnpm dev

执行 pnpm dev 将启动开发服务器，当你使用网络浏览器访问 localhost:3000 时，你应该会看到默认的 NuxtWelcome 组件。这个组件实际上标志着我们的项目已成功设置，我们准备在下一步中整合 Tailwind CSS。

安装 Tailwind CSS

在我们开始之前，让我们为我们的开发环境配备一个将增强我们的编码体验的工具——Tailwind CSS IntelliSense。如果你使用 Visual Studio Code（VS Code）作为代码编辑器，请考虑安装 Tailwind CSS IntelliSense 扩展。此扩展通过提供 Tailwind CSS 类的自动补全、语法高亮等功能，提高了你的开发效率，使你更容易应用样式，无需记住或频繁查阅文档。

要安装，只需点击窗口左侧活动栏中的扩展图标，导航到扩展视图，搜索 Tailwind CSS IntelliSense，然后点击 安装。

图 2.1：Tailwind VS Code 扩展

现在，你的 VS Code 已经通过 Tailwind CSS 功能得到了增强，智能代码补全和错误检查将简化你的开发过程。让我们继续前进，确保我们的编码之旅尽可能顺利！

首先，我们将 Tailwind CSS 集成到我们的项目中。执行以下命令以安装 Nuxt 3 的 Tailwind CSS 模块：

$ pnpm i -D @nuxtjs/tailwindcss

安装后，我们将 Nuxt 3 项目指向使用 Tailwind CSS。这需要对 nuxt.config.ts 文件进行轻微修改。导航到模块数组，并按以下方式引入 Tailwind CSS 包：

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss'],
})

将 '@nuxtjs/tailwindcss' 添加到模块数组中确保 Tailwind CSS 被我们的 Nuxt 3 项目识别并使用，使我们能够在组件中使用其实用类。

为了使 Tailwind CSS 符合我们项目的美学和功能需求，我们将创建一个名为 tailwind.config.js 的配置文件。此文件将作为我们调整或自定义 Tailwind CSS 默认设置的指挥中心。

让我们在项目的根目录下生成 tailwind.config.js：

// tailwind.config.js
export default  {
  // Your Tailwind CSS custom configuration goes here
}

你也可以运行以下命令来生成相同的文件：

$ pnpm dlx tailwindcss init

tailwind.config.js 文件将作为我们自定义样式、组件定义和主题调整的载体，确保我们的实用类优化，并在整个项目中保持一致的设计语言。

从我们的通用设置到更具体的设置，以下是我首选的 Tailwind CSS 启动配置：

export default {
  content: [],
  theme: {
    extend: {
      colors: {
        primary: '#42B883',
        secondary: '#35495E',
        neutral: '#F7F9FA'
      },
      container: {
        center: true,
        padding: {
          DEFAULT: '1.5rem',
          lg: '4rem',
          xl: '4rem',
          '2xl': '4rem'
        },
        screens: {
          sm: '576px',
          md: '768px',
          lg: '992px',
          xl: '1200px',
          '2xl': '1400px'
        }
      }
    }
  },
  plugins: []
}

深入探讨，让我们看看我选择的配置的每个部分是如何确保我们的项目在视觉和功能上保持平滑、一致和 Vue 主题风格的。

颜色自定义

Tailwind CSS 允许我们自定义其默认颜色，为我们提供了在项目中注入自己的品牌或主题颜色的灵活性。通过在配置中指定我们的颜色，例如与 Vue.js 颜色方案相呼应的绿色阴影，我们确保我们的设计既美观又巧妙地向观众传达我们的技术焦点。

容器自定义

容器部分确保我们的内容整齐居中，并为内容提供水平填充，以防止内容紧贴视口边缘。默认情况下，我们有 1.5rem 的水平填充，对于更大的 (lg, xl 和 2xl) 屏幕，填充扩展到 4rem，确保我们的内容在所有屏幕尺寸上都是可读的和美观的。

屏幕断点

在 Tailwind CSS 配置中的屏幕部分，通过定义断点来利用其响应式设计。断点是视口宽度，页面布局将在这些宽度处发生变化，旨在为各种屏幕尺寸提供最佳的用户体验。

在我们的自定义配置中，我们选择了这些特定的断点，以便与广泛使用的 Bootstrap 框架的断点更紧密地对齐。

在完成配置设置后，让我们通过制作一个简单的布局来测试我们的调整。创建一个 div 元素，并应用我们的自定义主色调，以确保我们的颜色配置已正确应用。导航到你的 app.vue 文件，清除现有的模板内容。现在，让我们在欢迎标题中注入我们的自定义主色调：

<template>
  <div class="text-7xl text-primary">Nuxt 3 + Tailwind
  CSS!</div>
</template>

这个简单的测试使我们能够直观地验证我们的 Tailwind CSS 自定义是否已成功集成到 Nuxt 3 项目中。在实施之后，你应该会看到一个类似于以下描述的屏幕：

图 2.2：配置好的 Tailwind CSS

注意

有时，Tailwind CSS 配置中的更改可能不会立即反映在你的开发环境中。如果颜色没有按预期应用，请停止你的开发服务器并重新启动它，以确保所有配置都已正确加载。

在我们的初始旅程中，我们已经成功设置并集成了 Tailwind CSS 到我们的 Nuxt 3 项目中。我们通过在我们的应用中应用自定义主色调到标题来测试水，确保我们的基础设置稳固且为下一步做好准备。

当我们过渡到下一个部分时，我们将开始创建我们投资组合的布局，确保我们的自定义样式能够无缝地渗透到每个组件和视图中。

创建网站布局和自定义字体

进入我们开发传奇的下一部分，我们的重点转向建立我们作品集的视觉基础。在这个关键阶段，从布局结构到字体选择，每一个设计决策都汇聚在一起，通过无缝的用户旅程讲述我们的专业故事。让我们深入探讨如何打造这个视觉之旅，从基本元素——字体开始。

嵌入 Lato 字体（或任何 Google 字体）

在我们布局的结构发展中，字体选择起着至关重要的作用，它不仅服务于美观，还增强了我们作品集的可读性和用户体验。我们选择的字体 Lato 以其干净的无衬线字符而闻名，为我们的作品集文本内容提供了专业而亲切的感觉。

要将 Lato 集成到我们的 Nuxt 项目中，我们有几种可行的选择。让我们来分析一下这两种。

选项 1 – 手动将字体添加到 nuxt.config.ts

第一种方法涉及从 Google Fonts 获取并使用直接链接。当你在 <head> 部分选择 Lato 时。

在 Nuxt 3 中，要在 HTML 的 <head> 中插入链接、元标签、脚本或其他元素，我们必须在 nuxt.config.ts 文件中的 app 对象内进行配置。下面的配置说明了如何集成外部链接：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      link: [
        { rel: 'preconnect', href:
          'https://fonts.googleapis.com' },
        { rel: 'preconnect', href:
          'https://fonts.gstatic.com' },
        { rel: 'stylesheet', href:
          'https://fonts.googleapis.com/css2?family=
           Lato:wght@100;300;400;700;900&display=swap' }
      ]
    }
  }
})

下面是对前面代码的分解：

• preconnect：此指令建立了到域的早期连接，优化了资源获取，从而提高了加载性能

• stylesheet 链接是我们指定 Lato 字体及其权重（100、300、400、700 和 900），这是我们打算在整个项目中使用的。

选项 2 – 使用 @nuxtjs/google-fonts 包

将 Google 字体无缝引入我们的 Nuxt 3 项目的另一种替代方法是利用 @nuxtjs/google-fonts 模块。此模块可以轻松地将 Google 字体嵌入到我们的网站上。

让我们一步步走过集成过程，然后深入配置 Lato 以适应我们的作品集。

首先安装 @nuxtjs/google-fonts 依赖项：

$ pnpm i -D @nuxtjs/google-fonts

接下来，我们将在 nuxt.config.ts 文件中注册此模块：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts'],
})

要指定 Google 字体及其相应的权重，请使用 nuxt.config.ts 中的 googleFonts 属性：

googleFonts: {
  families: {
    Lato: [100, 300, 400, 700, 900]
  }
}

这里是一个分解：

• families：此属性是一个对象，您在其中指定要包含在项目中的 Google 字体家族（或家族）。每个字体家族都是一个对象键。

• key 反映了谷歌字体的名称，而 value 决定了要加载的字体权重。在我们的上下文中，Lato: [100, 300, 400, 700, 900] 意味着我们指示该模块为我们的项目加载具有指定字重（100、300、400、700 和 900）的 Lato 字体家族。

现在你有两个可行的选项可供选择——直接将字体链接嵌入到你的 nuxt.config.ts 中，或者使用 @nuxtjs/google-fonts 模块——你可以选择最适合你项目需求的方法。配置好我们选择的字体后，让我们转向定制我们的 tailwind.config.js，以便在整个设计中识别和使用 Lato。

为了使 Lato 通过 Tailwind CSS 的实用类在整个项目中易于访问，我们修改 tailwind.config.js，使其识别 Lato 作为默认的无衬线字体：

theme: {
  extend: {
    fontFamily: {
      sans: ['Lato', 'sans-serif']
    }
  }
}

这个调整确保了每次我们应用 Tailwind CSS 的 font-sans 实用类（默认应用）时，都会使用 Lato，从而在我们的投资组合中实现一致的排版。

现在我们已经整理好了字体选项，让我们继续下一步，为我们的网站布局基础。

创建布局

首先，我们在 app.vue 文件中布局主要的 <div>，设置一个背景颜色，为我们的投资组合设定整体基调：

<!-- app.vue -->
<div class="bg-neutral">
  <!-- content here -->
</div>

在这里，bg-neutral 是一个 Tailwind CSS 类，它应用了我们之前在 tailwind.config.js 中定义的中性颜色。这作为我们整个投资组合的背景。

接下来，让我们构建标题。这是我们将如何做到的：

<header class="bg-secondary text-white p-6">
  <div class="container mx-auto flex justify-between
  items-center">
    <div class="text-xl font-light uppercase">
      Kareem Dabbeet</div>
    <nav class="hidden md:block">
      <ul class="flex gap-x-4">
        <li>
          <a href="#about"
            class="transition hover:text-primary"> About
          </a>
        </li>
        <!-- more links here -->
      </ul>
    </nav>
  </div>
</header>

注意，hidden md:block Tailwind CSS 类默认隐藏 <nav>，并在中等 (md:) 屏幕及更高版本上显示为块状，以适应响应式设计。

但关于标题导航链接呢？我们是否要手动添加并重复每个链接？但如果我们将来想要添加更多的标题链接怎么办？

没有必要每次都手动更新模板。相反，让我们利用 Vue 的动态渲染能力。在你的脚本中，定义一个名为 headerLinks 的数组，如下所示：

<script setup lang="ts">
const headerLinks = [
  { name: 'About', link: '#about' },
  { name: 'Portfolio', link: '#portfolio' },
  { name: 'Contact', link: '#contact' }
]
</script>

现在，修改你的标题中的 <li> 元素，使其循环遍历这个数组，如下所示：

<li v-for="item in headerLinks" :key="item.name">
  <a href="item.link"
    class="transition hover:text-primary">
    {{ item.name }}</a>
</li>

通过结合 Tailwind CSS 和 Vue.js，特别是组合 API，我们构建了一个既功能性强又视觉上统一的布局。这也为未来证明和可扩展的代码铺平了道路。

图 2.3：标题部分

在我们的布局经过精心调整并且字体无缝集成之后，让我们将注意力转向下一节中管理 assets 文件夹中的图片。

管理资产文件夹中的图片

在 Nuxt 3 中，管理样式表、字体或图像等资产是一个简单的过程。该框架为此目的提供了两个主要目录——public/ 和 assets/。

public/ 目录作为公共服务器，为在应用程序根 URL 公开提供的静态资产提供服务。此目录中的文件以原样提供，无需通过 Vite 或 webpack 等构建工具进行处理。例如，public/img/ 目录中的图像可以通过 /img/nuxt.png 静态 URL 访问。

相反，assets/目录用于存储你希望由构建工具（如public/目录）处理的文件。assets/目录中的文件不会以静态 URL 提供服务。

现在，让我们通过创建一个包含大型 Vue 图片的英雄部分来应用这个方法。

首先，为了在我们的项目中包含图片，我们在assets/目录中创建了一个新文件夹，并将其命名为images。在这个文件夹中，我们放置了一个名为vue-logo.webp的图片文件。

这里是英雄部分的实现：

<!-- Hero Section -->
<section class="bg-secondary text-white py-20">
  <div class="container grid md:grid-cols-2">
    <!-- Text content -->
    <div class="col-span-1 flex flex-col justify-center
    items-start">
      <h1 class="text-5xl mb-4">Hello! I'm Kareem
        Dabbeet</h1>
      <p class="text-2xl mb-8">
        A frontend developer specializing in Vue & Nuxt.
      </p>
      <button
        @click="useScrollTo('portfolio')"
        class="bg-primary text-white px-8 py-4 rounded-full
        hover:bg-opacity-90 transition duration-300">
        View My Work
      </button>
    </div>
    <!-- Image -->
    <div class="col-span-1 flex justify-end">
      <img src="img/vue-logo.webp"
          class="h-[350px]" />
    </div>
  </div>
</section>

在英雄部分，你会看到这一行：

<img src="img/vue-logo.webp" class="h-[350px]" />

在这里，~符号代表项目根目录，Nuxt 会自动理解在assets/images目录中查找vue-logo.webp。在构建过程中，Nuxt 将优化此图片，给它一个新的路径，有助于高效的缓存。

图 2.4：英雄部分

对于avatar.jpeg，位于assets/images文件夹中。图片显示如下：

<img
  src="img/avatar.jpeg"
  alt="Kareem Dabbeet"
  class="rounded-full w-48 h-48 mx-auto
  mb-6 shadow-xl border-4
  border-dashed border-primary"
/>

这里是包含头像图片、简介和技能的最终英雄部分：

<!-- About Me Section -->
<section id="about" class="py-16 bg-neutral">
  <div class="container mx-auto text-center">
    <!-- Avatar -->
    <img
      src="img/avatar.jpeg"
      alt="Kareem Dabbeet"
      class="rounded-full w-48 h-48 mx-auto
      mb-6 shadow-xl border-4
      border-dashed border-primary"
    />
    <!-- About Text -->
    <p class="text-gray-700 max-w-4xl mx-auto text-lg
      leading-loose mb-6 px-4">
      Hello! I'm Kareem Dabbeet, a frontend developer with
      a passion for building performant and user-friendly
      web applications. With expertise in Vue.js and
      Nuxt.js, I take pride in crafting solutions that are
      not only functional but also elegantly coded.
    </p>
    <!-- Skills -->
    <div class="flex flex-wrap justify-center gap-x-8
    gap-y-4 mb-8">
      <span class="text-primary bg-white px-4 py-2
        rounded-lg shadow">Javascript</span>
      <span class="text-primary bg-white px-4 py-2
        rounded-lg shadow">Vue</span>
      <span class="text-primary bg-white px-4 py-2
        rounded-lg shadow">Nuxt</span>
      <span class="text-primary bg-white px-4 py-2
        rounded-lg shadow">Tailwind CSS</span>
    </div>
  </div>
</section>

此代码包含三个主要元素：

• 头像图片：这显示我们的个人资料图片，以圆形样式呈现，并带有独特的虚线边框

• 简介：关于我们的简要介绍，突出我们作为前端开发者的角色以及我们在 Vue.js、Nuxt.js 和其他技术方面的专长

• 技能：以风格化的标签形式展示，这些标签展示了我们的主要技术专长

下图显示了此部分的截图：

图 2.5：关于我部分

现在，你是否注意到了我们在span元素中列出的技能，几乎具有相同的类。为了使我们的代码更易于维护和更简洁，我们为什么不将这些转换为可重用的 Vue 组件呢？让我们在下一节中深入探讨。

创建 ProjectShowcase 和 SkillChip 组件

如果你一直紧跟我们的步骤，你可能会注意到代码中的冗余，尤其是在span元素中。这种方法不仅冗长，而且使未来的更改变得困难。

在 Nuxt 中，components/目录充当所有 Vue 组件的中心。这些组件可以轻松导入到你的页面中，甚至可以导入到其他组件中。Nuxt 自动识别此目录中的任何组件，从而让你免于手动导入语句。

创建 SkillChip 组件

在你的 Nuxt 项目中的components/目录下，创建一个名为SkillChip.vue的新文件。打开SkillChip.vue并将提供的代码复制到这个文件中。此代码定义了你的新 SkillChip 组件的模板：

<template>
  <span class="text-primary bg-white px-4 py-2
  rounded-lg shadow">
    <slot></slot>
  </span>
</template>

在这里，<slot></slot>标签充当你将在<skill-chip>标签之间放置的任何内容的占位符。这使得组件可重用和可定制。

或者，你可以使用我们在前一章中安装的nuxtr扩展：

1. 在 VS Code 中，按 Ctrl + Shift + P（或在 Mac 上按 Cmd + Shift + P）打开命令面板。

2. 输入 nuxtr: 创建新组件 并选择菜单中出现的第一个选项（它应该与你输入的名称相同）。

3. 当提示时，将组件名称输入为 SkillChip。

4. 选择在根级别创建组件。

现在，让我们替换 SkillChip 组件中的重复 span 元素。更新你的代码如下：

<div class="flex flex-wrap justify-center gap-x-8 gap-y-4
mb-8">
  <skill-chip> Javascript </skill-chip>
  <skill-chip> Vue </skill-chip>
  <skill-chip> Nuxt </skill-chip>
  <skill-chip> Tailwind CSS </skill-chip>
</div>

通过这个简单的更改，我们的代码变得更加易于维护，未来添加或修改技能变得轻而易举。

现在我们已经优化了技能列表，让我们将注意力转向展示你的项目。

创建 ProjectShowcase 组件

我们的目的是简化在网站上展示多个项目的流程。而不是为每个项目复制 HTML 代码，我们可以通过创建可重用的 ProjectShowcase 组件来使这个过程更高效。

首先，让我们设置我们的数据。我们将使用一个对象数组，其中每个对象代表一个具有各种属性的项目，例如名称、描述和链接。

让我们将此数组添加到 app.vue 脚本中：

const projects = [
  {
    name: 'VueShop',
    description: 'An e-commerce platform built with Vue.js
                  and Vuetify.',
    image: ' /images/projects/1.jpeg',
    link: '#'
  },
  // ...other projects
];

关于图像路径的说明

在 Nuxt 3 中，默认不支持图像路径的动态导入。因此，我们将采取更简单的路线，将我们的项目图片放在公共文件夹中。这样，它们可以通过它们的静态 URL 直接访问，例如 /images/projects/1.jpeg。

接下来，创建一个名为 ProjectShowcase.vue 的新文件在你的 components/ 目录中。最初，让我们保持模板为空。在组件的 <script> 块中，我们使用 defineProps 来指定此组件期望的属性。这是使用 defineProps 的一个重要部分，它指定组件将接收一个包含特定字段的项目对象，例如 name、description、image 和 link：

<!-- ProjectShowcase.vue -->
<script setup lang="ts">
defineProps<{
  project: {
    name: string
    description: string
    image: string
    link: string
  }
}>()
</script>

现在，让我们完善组件的模板。想法是以卡片格式显示每个项目，包含项目的图片、名称、描述以及一个链接到它的链接。

下面是模板代码：

<template>
  <div class="bg-white rounded-lg shadow-lg
  overflow-hidden">
    <img
      :src="img/project.image"
      :alt="project.name"
      class="w-full h-[200px] object-cover object-top"
    />
    <div class="p-6">
      <h3 class="text-primary text-xl mb-2">
        {{ project.name }}
      </h3>
      <p class="text-gray-700 mb-4">
        {{ project.description }}
      </p>
      <a
        :href="project.link"
        class="text-secondary font-semibold transform
        transition-all duration-300
        hover:text-primary hover:ps-1">View Project
      </a>
    </div>
  </div>
</template>

我们组件的模板旨在优雅地展示每个项目。主要元素如下：

• 项目图片：显示项目的视觉方面，设置为覆盖卡片的上部

• 项目详情：这包括项目的名称、简短描述以及一个可点击的链接来访问它

最后，让我们使用主部分中的 v-for 指令将此组件绑定到我们的项目数组中：

  <section id="showcase" class="py-16 bg-slate-200">
      <h2 class="text-primary text-3xl mb-8 text-center">
        My Work</h2>
        <div
          class="container mx-auto grid grid-cols-1
                 md:grid-cols-2 lg:grid-cols-3 gap-12">
          <project-showcase
            v-for="project in projects"
            :key="project.name"
            :project="project"
          />
        </div>
  </section>

为了增强你正在工作的项目展示部分，你应该将 projects 对象扩展到包含多个项目。以下是你可以采取的步骤：

1. 在你现有的 projects 对象中，添加两个更多项目。每个项目条目应包括项目标题和描述等详细信息。

2. 对于你projects对象中的每个项目，包含一张图片。将这些图片保存在 Nuxt 项目的public文件夹中。这种放置方式确保了图片在你的应用中以静态方式提供服务。

3. 在你的项目条目中，引用相对于public文件夹的图片路径。例如，如果你在公共文件夹中有一个名为project1.jpg的图片，在你的项目对象中引用它为/project1.jpg。

以下图显示了项目展示区域的截图：

图 2.6：项目展示区域

通过这种方式，你已经成功地将项目展示模块化，使其在未来更容易管理和扩展。

在组件内部进行样式设置

在构建 UI 时，组件通常具有特定的样式，这些样式不应影响应用的其他部分。在 Vue 组件中使用作用域样式是实现这种隔离的一种方法。

让我们创建一个新的 Vue 组件，命名为CurvedDivider，我们可以在“关于我”和项目展示区域之间使用它作为视觉分隔符：

<!-- app.vue --->
<template>
  <!-- previous sections --->
  <!-- About Me Section -->
  <curved-divider />
  <!-- showcase / My Work -->
</template>

组件的结构很简单：

<template>
  <div class="divider" />
</template>

现在，让我们给这个组件添加一些自定义样式。我们想要设置它的高度和背景颜色，以及添加一个底部的曲线部分。

这里是如何做到这一点的：

<style scoped>
.divider {
  position: relative;
  height: 70px;
  background: #f7f9fa;
}
.divider::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #e2e8f0;
  border-radius: 100% 100% 0 0;
}
</style>

注意<style>标签中的scoped属性。当一个<style>标签有scoped属性时，它的 CSS 只会应用于当前组件的元素。这确保了组件的样式不会泄漏到应用的其他部分。

图 2.7：在 devtools 中检查