当前位置：首页 > VUE

vue实现商城开发

2026-01-19 10:58:23VUE

Vue 商城开发核心实现步骤

技术栈选择

Vue 3 + Pinia（状态管理）
Vue Router（路由管理）
Axios（HTTP请求）
Vant/Element Plus（UI组件库）
Vite（构建工具）

项目初始化 使用Vite创建项目模板：

npm create vite@latest vue-mall --template vue

安装核心依赖：

npm install pinia vue-router axios vant

路由配置示例

// router/index.js
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/product/:id',
    component: () => import('@/views/ProductDetail.vue')
  }
]

商品列表实现

vue实现商城开发

<!-- components/ProductList.vue -->
<template>
  <div class="product-grid">
    <van-card 
      v-for="item in products"
      :price="item.price"
      :title="item.name"
      :thumb="item.image"
      @click="$router.push(`/product/${item.id}`)"
    />
  </div>
</template>

<script setup>
defineProps({
  products: Array
})
</script>

购物车状态管理

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addToCart(product) {
      const existing = this.items.find(item => item.id === product.id)
      existing ? existing.quantity++ : this.items.push({...product, quantity: 1})
    }
  }
})

接口请求封装

// api/goods.js
import axios from 'axios'

export const getGoodsList = (params) => 
  axios.get('/api/goods', { params })

export const getGoodsDetail = (id) => 
  axios.get(`/api/goods/${id}`)

支付流程实现

vue实现商城开发

<!-- components/Payment.vue -->
<template>
  <van-submit-bar 
    :price="totalPrice"
    button-text="提交订单"
    @submit="handleSubmit"
  />
</template>

<script setup>
import { useCartStore } from '@/stores/cart'

const cart = useCartStore()
const totalPrice = computed(() => 
  cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0) * 100
)

const handleSubmit = async () => {
  const res = await createOrder(cart.items)
  if (res.payUrl) {
    window.location.href = res.payUrl
  }
}
</script>