在vue3写一个帖子的框架其中包含评论人数，喜欢人数，转发人数

在Vue 3中创建一个帖子框架，你可以使用组合式API（Composition API）来组织你的代码。以下是一个简单的例子，展示了如何在Vue 3中使用`<script setup>`语法来构建一个帖子组件，其中包括评论人数、喜欢人数和转发人数。

<template>
  <div class="post">
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
    <div class="stats">
      <span>评论人数: {{ post.commentsCount }}</span>
      <span>喜欢人数: {{ post.likesCount }}</span>
      <span>转发人数: {{ post.sharesCount }}</span>
    </div>
  </div>
</template>

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

// 假设这是从API获取的帖子数据
const post = ref({
  title: 'Vue 3 是什么？',
  content: 'Vue 3 是一个用于构建用户界面的渐进式JavaScript框架。',
  commentsCount: 25, // 评论人数
  likesCount: 120,   // 喜欢人数
  sharesCount: 30    // 转发人数
});
</script>

<style scoped>
.post {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
}

.stats {
  margin-top: 10px;
  font-size: 0.8em;
}
</style>

这个组件使用了`<script setup>`语法，它是一个更简洁的组合式API语法。`post`是一个响应式引用（`ref`），代表帖子的数据。在这个例子中，我们假设`post`对象是从后端API获取的数据，并且其`commentsCount`（评论人数）、`likesCount`（喜欢人数）和`sharesCount`（转发人数）属性会随着实际应用的逻辑动态变化。

需要注意的是，实际开发中，你可能需要从后端API获取实际的数据，并且可能需要处理异步逻辑，比如使用`axios`或`fetch`来获取数据，并使用`ref`和`reactive`来处理响应式数据。