📅 我們繼續 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><divclass="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 --><divv-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組件，實現一個移動端的導航組件。🚀
感謝閱讀，歡迎點贊、收藏和分享 😊
