用vue3做一个购物车页面

在Vue3中创建一个购物车页面，我们可以采用组件化的方式来构建。以下是步骤概述：

1. **初始化项目**：首先，确保你已经安装了Vue CLI并创建一个新的Vue3项目。

2. **设计数据模型**：定义购物车的数据结构，比如`CartItem`对象，包含商品ID、名称、价格等信息，以及一个`list`数组来存储所有商品。

// models/CartItem.js
export default {
  data() {
    return {
      cartItems: [],
    };
  },
};

3. **创建组件**：创建一个名为`Cart.vue`的组件，展示购物车列表和操作功能（如添加、删除、修改数量）。

<!-- Cart.vue -->
<template>
  <div class="cart">
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        <span>{{ item.name }} - {{ item.price }}</span>
        <button @click="removeItem(index)">Remove</button>
        <input type="number" v-model.number="item.quantity" min="1" />
        <button @click="updateItem(index)">Update</button>
      </li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import CartItem from '@/models/CartItem';

export default {
  components: { CartItem },
  data() {
    return {
      newCartItem: { ...CartItem.data(), quantity: 1 }, // 新商品预设项
    };
  },
  methods: {
    addItem() {
      this.cartItems.push(this.newCartItem);
      this.newCartItem = { ...CartItem.data(), quantity: 1 }; // 清空新商品项
    },
    removeItem(index) {
      this.cartItems.splice(index, 1);
    },
    updateItem(index) {
      const updatedItem = { ...this.cartItems[index], quantity: this.cartItems[index].quantity + 1 };
      this.cartItems[index] = updatedItem;
    },
  },
};
</script>

4. **路由配置**：在`router/index.js`中添加购物车的路由，跳转到`Cart.vue`组件。

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Cart from './views/Cart.vue';

const routes = [
  // ...
  {
    path: '/cart',
    component: Cart,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

5. **导航到购物车**：在需要的地方（如商品详情页），添加链接或者按钮，通过`this.$router.push('/cart')`导航到购物车。

以上就是基本的购物车页面在Vue3中的实现。你可以根据实际需求增加更多功能，例如显示总价、优惠券应用等。