当前位置：首页 > 文章列表 > 文章 > 前端 > 学习VUE3：创建一个基本的购物车应用示例

学习VUE3：创建一个基本的购物车应用示例

2024-02-07 12:41:36 0浏览收藏

本篇文章向大家介绍《学习VUE3：创建一个基本的购物车应用示例》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

随着现代 Web 应用程序的日益普及，Vue 成为了一款非常流行的前端框架。不久前，Vue 的最新版本 Vue3 也发布了。Vue3 带来了一些重要的改进和新特性，如更好的性能、更好的开发体验等。本篇文章将带你进入 VUE3 的世界，构建一个简单的购物车应用程序。

功能列表

在建立实例之前，让我们先看一下我们的购物车应用程序需要实现的功能列表：

实现一个商品列表，包括商品名称、商品图片、商品价格等信息
用户可以通过点击商品将其添加到购物车中
用户可以在购物车中查看购物商品列表，包括商品名称、商品数量、商品价格等信息
用户可以增加或减少购物车中每个商品的数量，并计算出购物车中商品总价
用户可以删除购物车中的商品

实例构建

在本例中，我们将使用 Vue CLI 来创建项目，这是一个非常流行的脚手架工具，可以帮助我们快速构建 Vue 项目。

创建项目

首先，需要安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

安装完成后，我们可以使用以下命令来创建我们的项目：

vue create shopping-cart

在安装过程中，它将提示你选择一些选项，你可以选择默认选项或根据自己的需求进行定制。安装完成后，进入项目目录，并启动客户端服务器：

cd shopping-cart
npm run serve

添加商品列表

我们将使用以下示例商品列表，包括商品名称、商品图片、商品描述、商品价格等信息：

const products = [
  {
    name: '可乐',
    description: '碳酸软饮料',
    image: 'https://cdn.pixabay.com/photo/2018/05/08/08/44/coca-cola-3388554_960_720.jpg',
    price: 2,
  },
  {
    name: '红牛',
    description: '功能性饮料',
    image: 'https://cdn.pixabay.com/photo/2020/06/17/08/57/red-bull-5317749_960_720.jpg',
    price: 3,
  },
  {
    name: '雪碧',
    description: '柠檬味碳酸饮料',
    image: 'https://cdn.pixabay.com/photo/2016/03/09/09/27/beverage-1245692_960_720.jpg',
    price: 2.5,
  },
];

要在应用程序中显示此产品列表，我们需要在 src/components 目录中创建一个名为 ProductList.vue 的新组件。这个组件将包含所有产品，并针对每个产品显示一个卡片元素。以下是组件的代码：

<template>
  <div class="product-list">
    <div class="card" v-for="product in products" :key="product.name">
      <div class="card-image">
        <figure class="image is-4by3">
          <img :src="product.image" alt="Product Image">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-4">{{ product.name }}</p>
            <p class="subtitle is-6">{{ product.description }}</p>
          </div>
        </div>

        <div class="content">
          <p><strong>{{ product.price }}</strong></p>
          <button class="button is-primary" @click="addProduct(product)">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductList',

  props: {
    products: {
      type: Array,
      required: true,
    },
  },

  methods: {
    addProduct(product) {
      this.$emit('add-to-cart', product);
    },
  },
};
</script>

<style scoped>
.product-list .card {
  margin-bottom: 20px;
}
</style>

这个组件包含一个 div 元素，类名为 product-list，内部包含多个商品卡片元素。每个卡片元素都有一个图片、一个标题、一段简短的描述和一个加入购物车按钮。当单击“添加到购物车”按钮时，该方法将触发“add-to-cart”事件，并发送商品对象作为参数。

添加购物车组件

接下来，我们将创建购物车组件。我们将使用另一个名为 ShoppingCart.vue 的单文件组件，此组件将显示用户已添加到购物车中的所有商品。

<template>
  <div class="shopping-cart">
    <div v-if="items.length === 0" class="empty-cart-message">
      Your cart is empty
    </div>
    <div v-else>
      <div class="cart-items">
        <div class="cart-item" v-for="(item, index) in items" :key="index">
          <div class="cart-item-image">
            <img :src="item.product.image" alt="Product Image">
          </div>
          <div class="cart-item-details">
            <div class="cart-item-name">{{ item.product.name }}</div>
            <div class="cart-item-quantity">
              <button class="button is-small" @click="decrementQuantity(item)">-</button>
              <span>{{ item.quantity }}</span>
              <button class="button is-small" @click="incrementQuantity(item)">+</button>
            </div>
            <div class="cart-item-price">{{ item.product.price }}</div>
            <button class="delete" @click="removeFromCart(item)"></button>
          </div>
        </div>
      </div>
      <div class="cart-summary">
        <div class="cart-total">
          <span class="total-text">Total:</span>
          <span class="total-amount">{{ total }}</span>
        </div>
        <div class="cart-actions">
          <button class="button is-link">Checkout</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',

  props: {
    items: {
      type: Array,
      required: true,
    },
  },

  computed: {
    total() {
      return this.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0);
    },
  },

  methods: {
    removeFromCart(item) {
      this.$emit('remove-from-cart', item);
    },

    incrementQuantity(item) {
      item.quantity += 1;
    },

    decrementQuantity(item) {
      item.quantity -= 1;

      if (item.quantity <= 0) {
        this.removeFromCart(item);
      }
    },
  },
};
</script>

<style scoped>
.shopping-cart .cart-item {
  display: flex;
  margin-bottom: 1rem;
}

.shopping-cart .cart-item-image {
  flex: 1;
  margin-right: 1rem;
  min-width: 10rem;
}

.shopping-cart .cart-item-image img {
  width: 100%;
}

.shopping-cart .cart-item-details {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.shopping-cart .cart-item-name {
  margin-bottom: 0.5rem;
}

.shopping-cart .cart-item-quantity {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.shopping-cart .cart-item-quantity button {
  margin-right: 0.5rem;
}

.shopping-cart .cart-item-price {
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1.25rem;
}

.shopping-cart .cart-summary {
  margin-top: 1rem;
}

.shopping-cart .cart-total {
  display: flex;
  align-items: center;
}

.shopping-cart .total-text {
  margin-right: 1rem;
}

.shopping-cart .total-amount {
  font-weight: bold;
  font-size: 1.25rem;
  margin-right: 1rem;
}
</style>

购物车组件包含一个 items 属性，表示已添加到购物车中的商品数组。如果列表为空，则显示“您的购物车是空的”消息。否则，它将显示包含所有购物车商品的列表，并显示总价和一个结账按钮。每个购物车项目元素都包含购物车商品图像、姓名、数量和价格，并且用户可以通过加、减或删除按钮来操作购物车的商品数量。

添加 App 组件

完整的应用程序将使用两个组件： ProductList.vue 和 ShoppingCart.vue。我们将使用 App.vue 作为主组件，将两个子组件放置在其中。

<template>
  <div id="app">
    <div class="container">
      <div class="columns">
        <div class="column">
          <product-list :products="products" @add-to-cart="addToCart"></product-list>
        </div>

        <div class="column">
          <shopping-cart :items="items" @remove-from-cart="removeFromCart"></shopping-cart>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'App',

  components: {
    ProductList,
    ShoppingCart,
  },

  data() {
    return {
      products: [
        // products data goes here
      ],
      items: [],
    };
  },

  methods: {
    addToCart(product) {
      const item = this.items.find((item) => item.product.name === product.name);

      if (item) {
        item.quantity += 1;
      } else {
        this.items.push({
          product,
          quantity: 1,
        });
      }
    },

    removeFromCart(item) {
      const index = this.items.findIndex((i) => i.product.name === item.product.name);

      if (index !== -1) {
        this.items.splice(index, 1);
      }
    },
  },
};
</script>

<style>
.container {
  margin-top: 50px;
}
</style>

主要 App.vue 组件包含两个子组件： ProductList.vue 和 ShoppingCart.vue。在 data 属性中，它还包含一个产品数组和购物车项目数组，以及可用于向购物车添加物品或从购物车删除物品的方法。

通过以上代码，我们已经成功的实现了一个简单的购物车应用程序。虽然这个应用程序只是一个小示例，但它展示了如何使用 Vue3 构建具有重要功能的应用程序。如果你想学习更多 Vue3 的相关内容，建议查看 Vue3 官方文档。

本篇关于《学习VUE3：创建一个基本的购物车应用示例》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

应用程序 VUE 购物车