用 vue3 写个购物车

好的，那么我们可以按照以下步骤来实现一个基本的购物车页面：

1. 创建一个 Vue 3 项目，并安装 Vue CLI：

npm install -g @vue/cli
vue create shopping-cart

2. 在创建的项目中安装 Vue Router 和 Vuex：

cd shopping-cart
npm install vue-router vuex --save

3. 在 `src` 目录下创建 `components` 和 `views` 目录，用于存放组件和视图文件。

4. 在 `views` 目录下创建 `Cart.vue` 文件，用于渲染购物车页面。在 `Cart.vue` 中，可以使用以下代码：

<template>
  <div>
    <h1>Shopping Cart</h1>
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Total</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.quantity === 1">-</button>
            {{ item.quantity }}
            <button @click="increment(index)">+</button>
          </td>
          <td>{{ item.price * item.quantity }}</td>
          <td>
            <button @click="removeItem(index)">Remove</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Total:</td>
          <td>{{ totalPrice }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Product 1', price: 10, quantity: 1 },
        { name: 'Product 2', price: 20, quantity: 2 },
        { name: 'Product 3', price: 30, quantity: 3 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    increment(index) {
      this.items[index].quantity++;
    },
    decrement(index) {
      this.items[index].quantity--;
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

5. 在 `App.vue` 中引入 `Cart` 组件并添加路由：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import Cart from './views/Cart.vue';

export default {
  name: 'App',
  components: {
    Cart
  }
};
</script>

<style>
#app {
  font-family: sans-serif;
  text-align: center;
}
</style>

<template>
  <div>
    <router-link to="/cart">Cart</router-link>
  </div>
</template>

<script>
export default {
  name: 'Header'
};
</script>

6. 在 `main.js` 中添加路由和 Vuex 的配置：

import { createApp } from 'vue';
import App from './App.vue';
import { createStore } from 'vuex';
import { createRouter, createWebHistory } from 'vue-router';
import Cart from './views/Cart.vue';

const store = createStore({
  state() {
    return {
      cartItems: [
        { name: 'Product 1', price: 10, quantity: 1 },
        { name: 'Product 2', price: 20, quantity: 2 },
        { name: 'Product 3', price: 30, quantity: 3 }
      ]
    };
  },
  mutations: {
    incrementQuantity(state, index) {
      state.cartItems[index].quantity++;
    },
    decrementQuantity(state, index) {
      state.cartItems[index].quantity--;
    },
    removeCartItem(state, index) {
      state.cartItems.splice(index, 1);
    }
  },
  getters: {
    totalPrice(state) {
      return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  }
});

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/cart' },
    { path: '/cart', component: Cart }
  ]
});

const app = createApp(App);

app.use(store);
app.use(router);

app.mount('#app');

7. 最后，运行 `npm run serve` 命令启动项目，即可在浏览器中访问购物车页面。

以上代码仅作为示例，具体实现还需要根据实际需求进行调整和完善。