vue.js 商城项目实例

vue-shop/
├── public/
│   └── index.html
├── src/
│   ├── assets/          # 静态资源（图片、样式等）
│   ├── components/      # 可复用的组件
│   │   ├── ProductCard.vue
│   │   ├── Cart.vue
│   │   └── ...
│   ├── views/           # 页面级组件
│   │   ├── Home.vue
│   │   ├── ProductList.vue
│   │   └── ...
│   ├── router/          # 路由配置
│   │   └── index.js
│   ├── store/           # Vuex 状态管理
│   │   └── index.js
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── package.json         # 项目依赖和脚本
└── ...

<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name" />
    <h3>{{ product.name }}</h3>
    <p>{{ product.description }}</p>
    <span>${{ product.price }}</span>
    <button @click="addToCart(product)">Add to Cart</button>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product);
    }
  }
};
</script>

<style scoped>
.product-card {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 16px;
}
</style>

// 错误示例
this.items[index] = newValue;

// 正确示例
this.$set(this.items, index, newValue);
// 或者
this.items.splice(index, 1, newValue);