📅 我们继续 50 个小项目挑战！—— Pokedex组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

---

使用 Vue 3 结合 PokeAPI 来创建一个炫酷的宝可梦图鉴应用。通过这个项目，你将能够浏览前150只宝可梦的信息，包括它们的名字、类型、身高、体重以及能力等。而且，每只宝可梦都有其独特的颜色主题哦！让我们开始吧！ 🚀

---

📝 应用目标

• 使用 Vue 3 的 <script setup> 语法和 Composition API
• 从 PokeAPI 获取并展示宝可梦数据
• 根据宝可梦类型动态设置卡片背景颜色
• 实现鼠标悬停显示更多详情的交互效果
• 采用 Tailwind CSS 快速构建美观的响应式布局

---

🔧 技术实现点

技术点	描述
Vue 3 <script setup>	简洁地定义组件逻辑
异步函数 fetchPokemons & getPokemon	从 PokeAPI 获取数据
动态背景颜色	根据宝可梦类型设置卡片背景色
鼠标事件绑定	显示/隐藏详细信息
Tailwind CSS	构建简洁美观的UI

---

🖌️ 组件实现

🎨 模板结构 <template>

<template>
    <div
        class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-r from-gray-200 to-gray-100 p-4 font-sans">
        <h1 class="mb-8 text-4xl font-bold tracking-wider text-gray-800">Pokedex</h1>
        <div class="mx-auto flex max-w-6xl flex-wrap justify-center" id="poke-container">
            <!-- Pokemon Card -->
            <div
                v-for="pokemon in pokemons"
                :key="pokemon.id"
                class="relative m-3 rounded-lg p-4 text-center shadow-md transition-transform hover:scale-105"
                :style="{ backgroundColor: pokemon.color }"
                @mouseenter="showDetails = pokemon.id"
                @mouseleave="showDetails = null">
                <!-- 卡片内容 -->
            </div>
        </div>
    </div>
</template>

我们的模板部分主要由一个渐变背景下的容器组成，其中包含了一个标题“Pokedex”和一个用于展示宝可梦卡片的区域。每个宝可梦卡片不仅展示了宝可梦的基本信息，还在鼠标悬停时显示更详细的资料。

---

💻 脚本逻辑 <script setup>

<script setup>
import { ref, onMounted } from 'vue'

const pokemons = ref([])
const pokemon_count = 150
const showDetails = ref(null)

// 宝可梦类型颜色映射
const colors = {
    fire: '#FDDFDF', grass: '#DEFDE0', electric: '#FCF7DE',
    water: '#DEF3FD', ground: '#f4e7da', rock: '#d5d5d4',
    fairy: '#fceaff', poison: '#98d7a5', bug: '#f8d5a3',
    dragon: '#97b3e6', psychic: '#eaeda1', flying: '#F5F5F5',
    fighting: '#E6E0D4', normal: '#F5F5F5',
}

const main_types = Object.keys(colors)

// 获取宝可梦数据
const fetchPokemons = async () => {
    for (let i = 1; i <= pokemon_count; i++) {
        await getPokemon(i)
    }
}

const getPokemon = async (id) => {
    try {
        const url = `https://pokeapi.co/api/v2/pokemon/${id}`
        const res = await fetch(url)
        const data = await res.json()
        createPokemonCard(data)
    } catch (error) {
        console.error('Error fetching Pokemon data:', error)
    }
}

// 处理宝可梦数据并添加到响应式数组
const createPokemonCard = (pokemon) => {
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
    const poke_types = pokemon.types.map((type) => type.type.name)
    const type = main_types.find((type) => poke_types.indexOf(type) > -1)
    const color = colors[type]

    pokemons.value.push({
        id: pokemon.id,
        name: name,
        type: type,
        color: color,
        height: pokemon.height,
        weight: pokemon.weight,
        abilities: pokemon.abilities,
    })
}

// 组件挂载时获取数据
onMounted(() => {
    fetchPokemons()
})
</script>

---

🎉 关键功能解析

✅ 动态背景颜色

通过定义 colors 对象，我们可以根据宝可梦的主要类型来设置卡片的背景颜色。这不仅增加了视觉吸引力，还帮助用户快速识别宝可梦的类型。

✅ 数据获取与处理

利用 fetchPokemons 和 getPokemon 函数，我们能够轻松地从 PokeAPI 获取数据，并将其转换成我们需要的格式。此外，我们还将数据添加到响应式数组中，以确保 UI 能够自动更新。

✅ 鼠标悬停效果

通过监听 @mouseenter 和 @mouseleave 事件，我们可以在鼠标悬停时显示宝可梦的详细信息，提供更加丰富的用户体验。

---

🎨 Tailwind CSS 样式重点

为了帮助你更好地理解如何使用 Tailwind CSS 来构建这个应用，下面是本文中使用的 Tailwind CSS 类及其作用的详细说明：

类名	作用
min-h-screen	设置最小高度为视口高度
bg-gradient-to-r	设置线性渐变背景，方向为从左到右
from-gray-200	渐变起始颜色
to-gray-100	渐变结束颜色
tracking-wider	设置字母间距更宽
mx-auto	自动设置左右外边距使元素水平居中
max-w-6xl	设置最大宽度为 6xl (72rem)
rounded-lg	设置较大的圆角半径
shadow-md	添加中等强度的阴影
transition-transform	平滑过渡变换属性
hover:scale-105	在悬停时放大 5%
overflow-y-auto	当内容超出容器高度时启用垂直滚动条
bg-white/90	设置背景颜色为白色，并带有 90% 不透明度

---

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 37,
        title: 'Pokedex',
        image: 'https://50projects50days.com/img/projects-img/37-pokedex.png',
        link: 'Pokedex',
    },

router/index.js 中添加路由选项：

{
        path: '/Pokedex',
        name: 'Pokedex',
        component: () => import('@/projects/Pokedex.vue'),
    },

---

🏁 总结

在这篇教程中，我们学习了如何使用 Vue 3 和 PokeAPI 创建一个简单的宝可梦图鉴应用。我们探讨了如何获取和处理外部数据，以及如何基于这些数据动态地改变UI元素的样式。

想要让你的宝可梦图鉴更加完美？这里有几个扩展建议：

• ✅ 搜索功能：增加搜索栏，让用户可以快速找到特定的宝可梦。
• ✅ 收藏功能：允许用户收藏他们最喜欢的宝可梦。
• ✅ 动画效果：为宝可梦卡片添加更多的过渡动画，使界面更加生动。
• ✅ 多语言支持：支持多种语言，让更多人享受探索的乐趣！

---

👉 下一篇，我们将完成MobileTabNavigation组件，实现一个移动端的导航组件。🚀

感谢阅读，欢迎点赞、收藏和分享 😊