基于 Vue 3 和 Element Plus 构建一个美食卡片应用

应用场景

本代码展示了一个基于 Vue 3 和 Element Plus 的美食卡片应用，它可以帮助用户轻松查找和浏览食谱。用户可以在搜索栏中输入关键词，系统将返回相关的菜谱卡片。应用还提供了每日推荐和分类推荐，方便用户探索更多美食选择。

代码基本功能

• **搜索功能：**用户可以在搜索栏中输入关键词，系统将返回相关的菜谱卡片。
• **今日菜谱：**展示每日推荐的菜谱卡片。
• **推荐菜谱：**展示分类推荐的菜谱卡片，包括Muffin、Beef等。
• **菜谱卡片：**每个菜谱卡片包含菜谱标题、图片和简短描述。

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

1. 安装依赖

npm install vue echarts echarts-for-vue @wangeditor/editor-for-vue v-calendar vue3-baidu-map-gl

2. 创建 Vue 组件

<template>
  <div class="flex flex-col h-screen bg-gray-100">
    <van-nav-bar
      title="What would you like to cook?"
      left-arrow
      fixed
      :border="false"
    />
    <div class="flex-1 overflow-y-auto">
      <div
        class="flex items-center justify-center h-12 border-b border-gray-200"
      >
        <van-search
          v-model="search"
          placeholder="Search for your recipe"
          class="w-full max-w-xs"
        />
      </div>
      <div class="flex flex-col space-y-4 p-4">
        <div class="font-semibold text-lg">Today's recipe</div>
        <div class="grid grid-cols-2 gap-4">
          <van-card
            class="flex flex-col items-center justify-center"
            :thumb="'https://source.unsplash.com/random/300x300/?pasta'"
          >
            <div class="text-center">Pasta with tomato sauce</div>
          </van-card>
          <van-card
            class="flex flex-col items-center justify-center"
            :thumb="'https://source.unsplash.com/random/300x300/?chicken'"
          >
            <div class="text-center">Chicken with vegetables</div>
          </van-card>
        </div>
        <div class="font-semibold text-lg">Recommended</div>
        <div class="grid grid-cols-2 gap-4">
          <van-card
            class="flex flex-col items-center justify-center"
            :thumb="'https://source.unsplash.com/random/300x300/?muffin'"
          >
            <div class="text-center">Muffin with cocoa cream</div>
          </van-card>
          <van-card
            class="flex flex-col items-center justify-center"
            :thumb="'https://source.unsplash.com/random/300x300/?beef'"
          >
            <div class="text-center">Beef stew</div>
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from "vue";
import * as echarts from "echarts";
import { h } from "vue";
import { createComponent } from "echarts-for-vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount } from "vue";
import { Calendar } from "v-calendar";
import { BMap } from "vue3-baidu-map-gl";

const ECharts = createComponent({ echarts, h });

const search = ref("");

const editorConfig = ref({
  placeholder: "请输入内容...",
});
const editor = ref();

const handleEditorCreated = (editorInstance) => {
  // Attach the editor instance to the ref
  editor.value = editorInstance;
  console.log("editor.value", editor.value, editorInstance);
};

onBeforeUnmount(() => {
  // Destroy the editor instance before the component is unmounted
  editor.value.destroy();
  editor.value = null;
});

const data = {
  today: [
    {
      title: "Pasta with tomato sauce",
      image: "https://source.unsplash.com/random/300x300/?pasta",
    },
    {
      title: "Chicken with vegetables",
      image: "https://source.unsplash.com/random/300x300/?chicken",
    },
  ],
  recommended: [
    {
      title: "Muffin with cocoa cream",
      image: "https://source.unsplash.com/random/300x300/?muffin",
    },
    {
      title: "Beef stew",
      image: "https://source.unsplash.com/random/300x300/?beef",
    },
  ],
};
</script>

<style>
.bg-gray-100 {
  --bg-opacity: 1;
  background-color: rgba(243, 244, 246, var(--bg-opacity));
}
</style>

3. 实现搜索功能

<div class="flex items-center justify-center h-12 border-b border-gray-200">
  <van-search
    v-model="search"
    placeholder="Search for your recipe"
    class="w-full max-w-xs"
  />
</div>

4. 实现每日推荐和推荐菜谱

<div class="flex flex-col space-y-4 p-4">
  <div class="font-semibold text-lg">Today's recipe</div>
  <div class="grid grid-cols-2 gap-4">
    <van-card
      class="flex flex-col items-center justify-center"
      :thumb="'https://source.unsplash.com/random/300x300/?pasta'"
    >
      <div class="text-center">Pasta with tomato sauce</div>
    </van-card>
    <van-card
      class="flex flex-col items-center justify-center"
      :thumb="'https://source.unsplash.com/random/300x300/?chicken'"
    >
      <div class="text-center">Chicken with vegetables</div>
    </van-card>
  </div>
  <div class="font-semibold text-lg">Recommended</div>
  <div class="grid grid-cols-2 gap-4">
    <van-card
      class="flex flex-col items-center justify-center"
      :thumb="'https://source.unsplash.com/random/300x300/?muffin'"
    >
      <div class="text-center">Muffin with cocoa cream</div>
    </van-card>
    <van-card
      class="flex flex-col items-center justify-center"
      :thumb="'https://source.unsplash.com/random/300x300/?beef'"
    >
      <div class="text-center">Beef stew</div>
    </van-card>
  </div>
</div>

总结与展望

开发过程中的经验与收获

• 掌握了 Vue 3 的基本用法和组件开发。
• 了解了 Element Plus 组件库的使用。
• 熟悉了 ECharts、Editor 和 Calendar 等第三方库的集成。

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

• 添加菜谱详情页，展示详细的菜谱信息和步骤。
• 实现菜谱收藏和分享功能。
• 集成第三方 API，获取更丰富的菜谱数据。
• 优化 UI 设计，提升用户体验。