一、前言：为什么选择Vue开发购物商城？
老司机们常说，看一个前端框架好不好，就得看它能不能快速搞出一个购物商城。Vue.js以其轻量、易上手和响应式数据绑定特性，成为了众多新手开发者的首选。想象一下，当你看着自己写的商城页面能实时更新购物车数量、流畅切换商品分类时，那种成就感绝对比双十一抢到优惠券还爽！
本文将避开枯燥的理论说教，直接带大家动手实现一个具备核心功能的“极简版”购物商城。我们将这个项目拆解为商品模块、购物车模块、用户模块三大支柱，每个模块都会配发“代码身份证”（完整示例），保证你跟着做就能出成果。
二、环境准备：创建你的Vue项目工坊
在开始敲代码前，我们需要准备好开发环境。假设你已经安装了Node.js，打开终端输入：
# 使用Vue CLI创建项目
npm install -g @vue/cli
vue create vue-shopping-mall
cd vue-shopping-mall
npm run serve
项目启动后，我们来规划下目录结构。一个清晰的目录就像整理好的衣柜，找东西才不会手忙脚乱：
src/
├── components/ # 公用组件
├── views/ # 页面组件
├── router/ # 路由配置
├── store/ # 状态管理
└── assets/ # 静态资源
三、核心模块设计：商城的三大支柱
1. 商品模块 - 商城的“颜值担当”
商品模块就像商城的橱窗，决定了用户的第一印象。我们需要实现商品列表展示、分类筛选和搜索功能。
设计思路：
- 商品数据用数组存储，每个商品都是对象
- 通过计算属性实现分类和搜索过滤
- 商品卡片组件化，方便复用
代码示例 - 商品列表组件：
<template>
<div class="product-list">
<div class="filter-bar">
<input v-model="searchText" placeholder="搜索商品...">
<select v-model="selectedCategory">
<option value="">全部分类</option>
<option value="electronics">数码产品</option>
<option value="clothing">服装配饰</option>
</select>
</div>
<div class="products">
<div v-for="product in filteredProducts" :key="product.id" class="product-card">
<img :src="product.image" :alt="product.name">
<h3>{{ product.name }}</h3>
<p class="price">¥{{ product.price }}</p>
<button @click="addToCart(product)">加入购物车</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
selectedCategory: '',
products: [
{
id: 1,
name: '无线蓝牙耳机',
price: 299,
category: 'electronics',
image: '/images/earphones.jpg'
},
{
id: 2,
name: '纯棉T恤',
price: 89,
category: 'clothing',
image: '/images/tshirt.jpg'
}
// ... 更多商品
]
}
},
computed: {
filteredProducts() {
return this.products.filter(product => {
const matchSearch = product.name.includes(this.searchText)
const matchCategory = !this.selectedCategory ||
product.category === this.selectedCategory
return matchSearch && matchCategory
})
}
},
methods: {
addToCart(product) {
this.$emit('add-to-cart', product)
}
}
}
</script>
2. 购物车模块 - 商城的“灵魂所在”
购物车是商城的核心，需要处理复杂的业务逻辑：添加商品、数量变更、价格计算等。
设计亮点：
- 使用Vuex进行状态管理，保证数据一致性
- 本地存储持久化，关闭页面购物车数据不丢失
- 实时计算总价，体验丝滑
代码示例 - Vuex购物车状态管理：
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cartItems: JSON.parse(localStorage.getItem('cart')) || []
},
mutations: {
ADD_TO_CART(state, product) {
const existingItem = state.cartItems.find(item => item.id === product.id)
if (existingItem) {
existingItem.quantity++
} else {
state.cartItems.push({
...product,
quantity: 1
})
}
// 保存到本地存储
localStorage.setItem('cart', JSON.stringify(state.cartItems))
},
REMOVE_FROM_CART(state, productId) {
state.cartItems = state.cartItems.filter(item => item.id !== productId)
localStorage.setItem('cart', JSON.stringify(state.cartItems))
},
UPDATE_QUANTITY(state, { productId, quantity }) {
const item = state.cartItems.find(item => item.id === productId)
if (item) {
item.quantity = quantity
localStorage.setItem('cart', JSON.stringify(state.cartItems))
}
}
},
getters: {
cartTotalPrice: state => {
return state.cartItems.reduce((total, item) => {
return total + item.price * item.quantity
}, 0)
},
cartItemCount: state => {
return state.cartItems.reduce((count, item) => {
return count + item.quantity
}, 0)
}
}
})
购物车组件实现：
<template>
<div class="shopping-cart">
<h2>购物车 ({{ cartItemCount }})</h2>
<div v-if="cartItems.length === 0" class="empty-cart">
<p>购物车空空如也，快去逛逛吧~</p>
</div>
<div v-else>
<div v-for="item in cartItems" :key="item.id" class="cart-item">
<img :src="item.image" :alt="item.name">
<div class="item-details">
<h4>{{ item.name }}</h4>
<p>¥{{ item.price }}</p>
</div>
<div class="quantity-controls">
<button @click="decreaseQuantity(item)">-</button>
<span>{{ item.quantity }}</span>
<button @click="increaseQuantity(item)">+</button>
</div>
<button @click="removeItem(item.id)" class="remove-btn">删除</button>
</div>
<div class="cart-summary">
<p class="total">总计: ¥{{ cartTotalPrice }}</p>
<button @click="checkout" class="checkout-btn">去结算</button>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['cartItems']),
...mapGetters(['cartTotalPrice', 'cartItemCount'])
},
methods: {
...mapMutations(['UPDATE_QUANTITY', 'REMOVE_FROM_CART']),
increaseQuantity(item) {
this.UPDATE_QUANTITY({
productId: item.id,
quantity: item.quantity + 1
})
},
decreaseQuantity(item) {
if (item.quantity > 1) {
this.UPDATE_QUANTITY({
productId: item.id,
quantity: item.quantity - 1
})
}
},
removeItem(productId) {
this.REMOVE_FROM_CART(productId)
},
checkout() {
if (this.cartItems.length > 0) {
alert(`下单成功！总金额：¥${this.cartTotalPrice}`)
// 实际开发中这里会跳转到订单页面
}
}
}
}
</script>
3. 用户模块 - 商城的“保安大队”
用户模块负责登录状态管理和个人中心，虽然简单但必不可少。
代码示例 - 登录组件：
<template>
<div class="login">
<h2>{{ isLogin ? '登录' : '注册' }}</h2>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" type="text" placeholder="用户名" required>
<input v-model="form.password" type="password" placeholder="密码" required>
<button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
</form>
<p @click="toggleMode" class="toggle-mode">
{{ isLogin ? '没有账号？点击注册' : '已有账号？点击登录' }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
isLogin: true,
form: {
username: '',
password: ''
}
}
},
methods: {
toggleMode() {
this.isLogin = !this.isLogin
this.form.username = ''
this.form.password = ''
},
handleSubmit() {
// 实际开发中这里会调用API
if (this.isLogin) {
// 登录逻辑
this.$store.commit('SET_USER', {
username: this.form.username,
isLoggedIn: true
})
this.$router.push('/')
} else {
// 注册逻辑
alert('注册成功，请登录')
this.isLogin = true
}
}
}
}
</script>
四、功能联调：让模块之间愉快地聊天
单个模块写好之后，我们需要让它们能够相互通信。这里主要用到Vue的事件总线和路由管理。
事件总线示例 - 商品加入购物车：
// utils/eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 在商品组件中发送事件
methods: {
addToCart(product) {
EventBus.$emit('add-to-cart', product)
}
}
// 在根组件中监听事件
mounted() {
EventBus.$on('add-to-cart', (product) => {
this.$store.commit('ADD_TO_CART', product)
})
}
路由配置示例：
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import ProductList from '@/views/ProductList'
import ShoppingCart from '@/views/ShoppingCart'
import UserLogin from '@/views/UserLogin'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/', component: ProductList },
{ path: '/cart', component: ShoppingCart },
{ path: '/login', component: UserLogin }
]
})
五、样式美化：给你的商城穿上漂亮衣服
功能实现了，但界面太丑怎么办？这里提供一些基础CSS让商城看起来更专业：
/* 基础样式 */
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 16px;
text-align: center;
transition: transform 0.2s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
border-bottom: 1px solid #eee;
}
.quantity-controls button {
width: 30px;
height: 30px;
border: none;
background: #f0f0f0;
cursor: pointer;
}
.checkout-btn {
background: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
六、调试技巧：遇到bug不要慌
开发过程中难免会遇到各种问题，这里分享几个实用调试技巧：
- 善用Vue Devtools：浏览器安装Vue开发者工具，可以直观查看组件树和数据流
- console.log的艺术：在关键位置添加日志，比如：
addToCart(product) {
console.log('添加商品:', product)
console.log('当前购物车:', this.$store.state.cartItems)
this.$store.commit('ADD_TO_CART', product)
}
- 错误边界处理：使用Vue的errorCaptured钩子捕获组件错误
七、总结与扩展
通过以上步骤，我们已经完成了一个具备核心功能的Vue购物商城。这个项目虽然简单，但涵盖了Vue的大部分基础概念：组件化开发、计算属性、事件处理、状态管理等。
可以继续扩展的功能：
- 商品详情页
- 订单历史查询
- 商品收藏功能
- 移动端适配
- 与后端API对接
记住，学习Vue最好的方式就是动手实践。不要担心代码不够完美，先让项目跑起来，再逐步优化。当你看到自己亲手打造的商城能够正常运行时，那种成就感就是最好的奖励！
最后的小彩蛋：在你的商城项目中添加这个“摸鱼模式”，让商品图片在上班时间自动变成文档截图——当然，这只是个玩笑，专心工作才是正经事！
扫一扫
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
