Vue.js 轻松打造购物车，新手小白也能轻松上手

环境搭建与初始设置

开始前确保已安装 Node.js 和 npm。接着创建新的 Vue 项目：

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

完成初始设置后，使用 Vue CLI 的界面选择默认配置即可。

构建购物车基本功能

添加商品到购物车

首先，在 src/components 目录下创建一个名为 ProductList.vue 的组件。这个组件用于显示所有可添加至购物车的商品列表：

<template>
  <div class="product-list">
    <h2>产品列表</h2>
    <ul>
      <li v-for="(item, index) in products" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '产品一', price: 10 },
        { name: '产品二', price: 20 },
        // 添加更多商品
      ]
    };
  },
  methods: {
    addToCart(product) {
      this.$emit('add-product', product);
    }
  }
};
</script>

然后在 App.vue 中引入 ProductList 组件，并监听添加事件，将商品信息传递给购物车组件。

购物车功能实现

创建一个新的组件 Cart.vue，用于展示和管理已加入的商品列表：

<template>
  <div class="cart">
    <h2>我的购物车</h2>
    <ul v-if="items.length > 0">
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - 数量：{{ item.quantity }}
        <button @click="removeProduct(index)">移除</button>
      </li>
    </ul>
    <p v-else>购物车空空如也！</p>
  </div>
</template>

<script>
export default {
  props: ['items'],
  methods: {
    removeProduct(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

在 App.vue 中，添加购物车的逻辑，并监听商品列表中加入购物车事件。

<template>
  <div id="app">
    <product-list :products="allProducts" @add-product="addToCart"></product-list>
    <cart :items="cartItems"></cart>
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import Cart from './components/Cart.vue';

export default {
  components: { 
    ProductList,
    Cart
  },
  data() {
    return {
      allProducts: [
        // 初始化商品列表
      ],
      cartItems: []
    };
  },
  methods: {
    addToCart(product) {
      const existingItem = this.cartItems.find(item => item.name === product.name);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        this.$set(product, 'quantity', 1); // 添加数量属性
        this.cartItems.push(product);
      }
    }
  }
};
</script>

计算总价

在 Cart.vue 组件中增加计算属性来实现总价的动态更新：

<script>
export default {
  props: ['items'],
  computed: {
    total() {
      return this.items.reduce((acc, item) => acc + item.price * item.quantity, 0);
    }
  },
  methods: {
    removeProduct(index) {
      this.items.splice(index, 1);
    }
  }
};

在模板中展示总价：

<template>
  <div class="cart">
    <!-- 购物车列表 -->
    <p>总价：{{ total }}</p>
  </div>
</template>

结束语

本文介绍了如何使用 Vue.js 创建一个简单的购物车。通过添加商品、更新数量及计算总价等基本功能的实现，为新手小白提供了一个很好的学习起点。随着实践积累和对 Vue 更深入的理解，可以继续探索更复杂的电商应用功能。

• 资源链接：
  • Vue.js 官方文档
  • Vue CLI 文档