帮我写一个vue项目，要求页面包含商品详情，商品评论列表评论人和评论内容，评论内容能输入评论单机发表评论能将评论加入商品评论列表

为了帮助您创建一个简单的Vue.js项目，我们将构建一个基本结构，包括商品详情页面、评论组件以及评论表单。首先，我们需要安装Vue CLI来初始化项目：

npm install -g @vue/cli
vue create my-commerce-app
cd my-commerce-app

接下来，在`src`目录下创建三个文件夹：`components`, `views`, 和 `assets`.

1. 在`components`文件夹下创建`ProductDetails.vue`和`Comment.vue`组件：
- `ProductDetails.vue`:

     <template>
       <div>
         <h1>商品详情</h1>
         <!-- 商品详情展示 -->
         <product-detail :product="selectedProduct"></product-detail>
         <comment-list :comments="comments"></comment-list>
       </div>
     </template>

     <script setup>
       import { ref } from 'vue';
       // 省略导入其他依赖...
       const selectedProduct = ref({ /* 商品数据 */ });
       const comments = ref([]);

       // ... 实现获取和显示商品详情的方法
     </script>

- `Comment.vue` (仅展示评论部分):

     <template>
       <ul>
         <li v-for="(comment, index) in comments" :key="index">
           <p>评论人: {{ comment.user }}</p>
           <p>评论内容: {{ comment.content }}</p>
         </li>
         <form @submit.prevent="addComment">
           <input type="text" v-model="newComment.user" placeholder="请输入评论者名">
           <textarea v-model="newComment.content" placeholder="请输入评论内容"></textarea>
           <button type="submit">发表评论</button>
         </form>
       </ul>
     </template>
     <script setup>
       // ... 实现评论添加方法 addComment() 和数据状态 newComment
     </script>

2. 在`views`文件夹下创建`Home.vue`（入口页面）：

     <template>
       <router-view></router-view>
     </template>
     <script>
       import ProductDetails from '@/components/ProductDetails.vue';
       // ... 导入并配置路由
     </script>

3. 配置路由（假设使用Vue Router）：

   // routes/index.js
   export default [
     {
       path: '/product/:productId',
       name: 'ProductDetails',
       component: () => import('@/views/ProductDetails.vue'),
     },
     // 其他路由...
   ];

现在项目的大概结构已经建立好了。在`ProductDetails.vue`里，你需要从API或本地数据源获取商品详情，并在组件内部管理评论列表。同时，在`Comment.vue`中处理用户提交新评论的逻辑。