基于 Vue3 的卡片式食谱展示应用

应用场景介绍

本代码用于构建一个基于 Vue3 的卡片式食谱展示应用，该应用允许用户浏览各种食谱，并查看其详细内容和营养信息。它适用于美食博客、食谱网站或任何希望展示食谱集合的场景。

代码基本功能

此代码实现了以下基本功能：

• **卡片式食谱展示：**使用卡片布局展示食谱，包括图片、标题、时间、热量等信息。
• **食谱过滤：**用户可以根据类别（如晚餐、蔬菜等）过滤食谱。
• **食谱详情页：**点击卡片可进入食谱详情页，查看更详细的食谱内容，包括配料、步骤和营养信息。
• **收藏食谱：**用户可以收藏喜爱的食谱，以便将来快速访问。

功能实现步骤及关键代码分析

1. 页面布局

页面布局使用 Flexbox 布局，分为头部、导航栏和主内容区域。头部包含搜索栏和选项按钮，导航栏包含食谱类别选项卡，主内容区域用于展示食谱卡片。

<template>
  <div class="flex flex-col h-screen bg-gray-100">
    <div class="flex items-center justify-between p-4 border-b border-gray-200">
      <!-- 头部 -->
      <van-icon name="arrow-left" size="24" color="#333" />
      <input type="text" placeholder="Search..." class="w-full h-10 px-4 text-sm bg-gray-200 rounded-full focus:outline-none" />
      <van-icon name="option" size="24" color="#333" />
    </div>
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200">
      <!-- 导航栏 -->
      <van-button round type="primary" size="small">View all</van-button>
      <van-tabs v-model="activeTab" class="flex items-center">
        <van-tab>Dinner</van-tab>
        <van-tab>Vegetables</van-tab>
        <van-tab>Breakfast</van-tab>
        <van-tab>Brunch</van-tab>
        <van-tab>Chinese</van-tab>
      </van-tabs>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto p-4">
      <!-- 主内容区域 -->
      <van-card shadow :bordered="false" class="mb-4">
        <!-- 食谱卡片 -->
      </van-card>
    </div>
  </div>
</template>

2. 食谱卡片

食谱卡片使用 Vue3 的 v-for 指令来遍历食谱数据并生成卡片。每个卡片包含以下内容：

• **标题：**食谱名称和收藏按钮。
• **图片：**食谱图片。
• **时间和热量：**食谱烹饪时间和热量。

<van-card shadow :bordered="false" class="mb-4">
  <template #title>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <img src="https://source.unsplash.com/random/100x100" alt="" class="w-10 h-10 rounded-full mr-2" />
        <div class="text-sm font-semibold">Hummus with pomegranate and nuts</div>
      </div>
      <div class="flex items-center">
        <van-icon name="heart" size="20" color="#ff5722" />
      </div>
    </div>
  </template>
  <div class="flex items-center justify-between mt-2">
    <div class="flex items-center">
      <van-icon name="time-o" size="16" color="#999" />
      <span class="text-sm text-gray-500 ml-1">15 min</span>
    </div>
    <div class="flex items-center">
      <van-icon name="fire" size="16" color="#999" />
      <span class="text-sm text-gray-500 ml-1">346 kcal</span>
    </div>
  </div>
</van-card>

3. 食谱详情页

点击食谱卡片后，会进入食谱详情页。该页面包含以下内容：

• **食谱信息：**食谱名称、时间、热量、配料和步骤。
• **收藏按钮：**允许用户收藏食谱。

<div class="flex flex-col p-6">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold">{{ recipe.title }}</h1>
    <van-icon name="heart" size="24" color="#ff5722" />
  </div>
  <div class="flex items-center justify-between mt-4">
    <div class="flex items-center">
      <van-icon name="time-o" size="16" color="#999" />
      <span class="text-sm text-gray-500 ml-1">{{ recipe.time }}</span>
    </div>
    <div class="flex items-center">
      <van-icon name="fire" size="16" color="#999" />
      <span class="text-sm text-gray-500 ml-1">{{ recipe.calories }} kcal</span>
    </div>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-semibold">Ingredients</h2>
    <ul class="list-disc ml-6">
      <li v-for="ingredient in recipe.ingredients" :key="ingredient">{{ ingredient }}</li>
    </ul>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-semibold">Steps</h2>
    <ol class="list-decimal ml-6">
      <li v-for="step in recipe.steps" :key="step">{{ step }}</li>
    </ol>
  </div>
</div>

4. 食谱过滤

用户可以通过导航栏中的选项卡过滤食谱。当点击选项卡时，activeTab 响应式变量将更新，并触发过滤功能。

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

const activeTab = ref('Dinner')
const recipes = [
  // ...
]

onMounted(() => {
  // Do something after the page is mounted
})
</script>

总结与展望

开发过程中的经验与收获：

• 掌握了 Vue3 的响应式系统和组件化开发。
• 了解了如何使用 Flexbox 布局和 CSS 样式来创建美观的 UI。
• 提高了对 TypeScript 的理解，用于类型检查和代码维护。

未来该卡片功能的拓展与优化：

• 添加分页功能，以便展示更多食谱。
• 实现食谱搜索功能，允许用户根据关键词搜索食谱。
• 集成社交媒体功能，允许用户分享食谱和评论。
• 探索使用人工智能技术来推荐个性化的食谱。