我需要一个vue3的pc端的购物车页面

好的，以下是一个简单的Vue3购物车页面示例，你可以根据自己的需求进行修改和优化：

<template>
  <div class="cart">
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cartList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="minus(index)" :disabled="item.count <= 1">-</button>
            <input type="text" v-model.number="item.count">
            <button @click="add(index)">+</button>
          </td>
          <td>{{ item.price * item.count }}</td>
          <td>
            <button @click="remove(index)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">合计：</td>
          <td>{{ totalPrice }}</td>
          <td>
            <button @click="clear">清空购物车</button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        { name: '商品1', price: 100, count: 1 },
        { name: '商品2', price: 200, count: 3 },
        { name: '商品3', price: 300, count: 2 },
      ],
    };
  },
  computed: {
    totalPrice() {
      return this.cartList.reduce((total, item) => {
        return total + item.price * item.count;
      }, 0);
    },
  },
  methods: {
    add(index) {
      this.cartList[index].count++;
    },
    minus(index) {
      this.cartList[index].count--;
    },
    remove(index) {
      this.cartList.splice(index, 1);
    },
    clear() {
      this.cartList = [];
    },
  },
};
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
button {
  border: none;
  background-color: #eee;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
tfoot td {
  font-weight: bold;
}
</style>

在这个示例中，我们使用了Vue3的新特性`<script setup>`，这个特性可以让我们更轻松地编写组件，避免了一些重复的代码。

这个组件包含一个表格，每行显示一个商品的信息，包括商品名称、单价、数量、小计和操作。我们使用`v-for`指令遍历购物车列表，并使用`v-model`指令实现数量的双向绑定。同时，我们还使用了计算属性来计算购物车的总价。

在方法中，我们实现了添加、减少、删除和清空购物车的功能。其中，添加和减少数量的方法只需要改变对应商品的数量即可，删除方法使用`splice`函数从购物车列表中删除对应的商品，清空购物车方法直接将购物车列表清空即可。

最后，我们还为按钮添加了一些样式，使其更加美观。