当前位置：首页 > VUE

vue实现商城

2026-03-07 12:56:11VUE

Vue 实现商城的基本步骤

项目初始化 使用 Vue CLI 或 Vite 创建项目，安装必要的依赖如 Vue Router、Vuex/Pinia、Axios 等。确保项目结构清晰，划分组件、页面、路由和状态管理模块。

页面结构设计 商城通常包含首页、商品列表页、商品详情页、购物车页、订单页和用户中心页。每个页面对应一个路由，使用 Vue Router 实现页面跳转和路由守卫。

商品展示 商品数据通过 API 获取，使用 Axios 进行异步请求。商品列表页使用 v-for 渲染商品卡片，商品详情页展示商品图片、价格、描述等信息。图片懒加载可优化性能。

购物车功能 使用 Vuex 或 Pinia 管理购物车状态，包括添加商品、删除商品、修改数量等操作。购物车数据可持久化存储到 localStorage 或通过 API 与后端同步。

vue实现商城

订单流程 订单页展示购物车选中的商品，提供收货地址选择和支付方式选择。提交订单后跳转到支付页或订单完成页，订单状态可通过 WebSocket 或轮询更新。

关键代码示例

商品列表页

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-card">
      <img :src="product.image" :alt="product.name" />
      <h3>{{ product.name }}</h3>
      <p>¥{{ product.price }}</p>
      <button @click="addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      products: [],
    };
  },
  methods: {
    ...mapActions(['addToCart']),
    fetchProducts() {
      axios.get('/api/products').then(response => {
        this.products = response.data;
      });
    },
  },
  created() {
    this.fetchProducts();
  },
};
</script>

购物车状态管理

vue实现商城

// store/cart.js
import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  actions: {
    addToCart(product) {
      const existingItem = this.items.find(item => item.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        this.items.push({ ...product, quantity: 1 });
      }
    },
    removeFromCart(productId) {
      this.items = this.items.filter(item => item.id !== productId);
    },
  },
  getters: {
    totalPrice: state => {
      return state.items.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
});