Vue 3 卡片组件示例：创建漂亮且可定制的卡片

当然，下面是一个使用 Vue 3 编写的优美卡片组件的示例代码：

<template>
  <div>
    <div class='card'>
      <img :src='image' alt='Card Image' class='card-image' />
      <div class='card-content'>
        <h3 class='card-title'>{{ title }}</h3>
        <p class='card-description'>{{ description }}</p>
        <a :href='link' class='card-link'>Read More</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    image: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    link: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.card {
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.card-description {
  margin: 8px 0;
  font-size: 16px;
  color: #666;
}

.card-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #2c3e50;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.card-link:hover {
  background-color: #34495e;
}
</style>

这是一个 Vue 3 的单文件组件示例，与之前的 Vue 2 示例代码相似。您可以像之前一样使用此组件，并传递 'image'、'title'、'description' 和 'link' 属性来自定义卡片的内容。

请注意，Vue 3 与 Vue 2 在某些方面有所不同，例如，Vue 3 中使用 'setup()' 函数来替代 Vue 2 的 'data' 和 'methods'。如果您需要更复杂的逻辑，您可以在 'setup()' 函数中编写相应的代码。

希望这对您有所帮助！如果您还有其他问题，请随时提问。