用vue写一个菜谱页面

好的，我来给你提供一个简单的菜谱页面的 Vue 代码。在这里，我使用了 Vue 3 和 Bootstrap 5。

<template>
  <div class="container my-5">
    <h1 class="text-center">{{ title }}</h1>
    <div class="row">
      <div class="col-md-4" v-for="(recipe, index) in recipes" :key="index">
        <div class="card mb-3">
          <img :src="recipe.image" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">{{ recipe.name }}</h5>
            <p class="card-text">{{ recipe.description }}</p>
            <p class="card-text"><small class="text-muted">{{ recipe.date }}</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecipePage",
  data() {
    return {
      title: "菜谱",
      recipes: [
        {
          name: "番茄炒蛋",
          description: "简单易做，美味可口。",
          image: "https://picsum.photos/id/1018/400/300",
          date: "2021-09-01",
        },
        {
          name: "麻婆豆腐",
          description: "辣到爆，让你欲罢不能。",
          image: "https://picsum.photos/id/1025/400/300",
          date: "2021-09-02",
        },
        {
          name: "红烧肉",
          description: "肥而不腻，入口即化。",
          image: "https://picsum.photos/id/1041/400/300",
          date: "2021-09-03",
        },
      ],
    };
  },
};
</script>

这段代码定义了一个名为 RecipePage 的 Vue 组件，其中包含一个标题和一个菜谱列表。菜谱列表使用 v-for 指令渲染每个菜谱的卡片，包含菜谱的名称、描述、图片和日期。你可以根据自己的需要修改数据和样式，并添加更多的交互效果。