使用vue设计商城的前端代码，给我一下实例代码

好的，以下是一个使用 Vue 设计商城前端的示例代码：

<template>
  <div class="shopping-cart">
    <h1>我的购物车</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }} 元
      </li>
    </ul>
    <p>总价：{{ total }} 元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品 1', price: 100 },
        { id: 2, name: '商品 2', price: 200 },
        { id: 3, name: '商品 3', price: 300 }
      ]
    }
  },
  computed: {
    total() {
      return this.items.reduce((acc, item) => acc + item.price, 0)
    }
  }
}
</script>

<style scoped>
.shopping-cart {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}
</style>

请注意，这只是一个简单的示例，实际的代码可能更复杂和复杂。