vue实现外卖页面
实现外卖页面的核心步骤
使用Vue.js实现外卖页面需要结合组件化开发、状态管理以及第三方库的集成。以下为关键实现方法：
页面结构与组件划分
外卖页面通常分为顶部导航栏、商品分类侧边栏、商品列表和底部购物车组件。创建以下Vue组件：
Header.vue：包含搜索框和商家信息Sidebar.vue：商品分类导航GoodsList.vue：商品展示卡片Cart.vue：底部购物车汇总
<!-- GoodsList.vue示例 -->
<template>
<div class="goods-item" v-for="item in goodsList" :key="item.id">
<img :src="item.image" class="goods-img">
<div class="goods-info">
<h3>{{ item.name }}</h3>
<p class="price">¥{{ item.price }}</p>
<div class="cart-control">
<button @click="decrease(item)">-</button>
<span>{{ item.count || 0 }}</span>
<button @click="increase(item)">+</button>
</div>
</div>
</div>
</template>状态管理设计
使用Vuex管理全局状态，包括：
- 商品数据
- 购物车状态
- 当前分类选择
// store.js
export default new Vuex.Store({
state: {
goods: [],
cart: [],
currentCategory: 0
},
mutations: {
ADD_TO_CART(state, goods) {
const record = state.cart.find(item => item.id === goods.id)
if (!record) {
state.cart.push({...goods, count: 1})
} else {
record.count++
}
}
}
})交互功能实现
商品分类联动效果通过计算属性和事件监听实现：
// Sidebar.vue
export default {
computed: {
categories() {
return this.$store.state.goods.map(item => item.category)
}
},
methods: {
selectCategory(index) {
this.$store.commit('SET_CATEGORY', index)
}
}
}购物车功能优化
实现购物车动画和实时计算：
// Cart.vue
export default {
computed: {
totalPrice() {
return this.$store.state.cart.reduce((total, item) => {
return total + item.price * item.count
}, 0)
}
}
}数据请求与Mock
使用axios获取后端数据，开发阶段可配置Mock数据：
// api.js
export const getGoods = () => {
return axios.get('/api/goods')
}
// mock数据示例
const mockGoods = [
{
id: 1,
name: '汉堡',
price: 15,
category: '快餐'
}
]样式与布局技巧
采用flex布局实现响应式设计：
.goods-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.goods-item {
width: 48%;
margin-bottom: 15px;
}性能优化建议
- 商品图片使用懒加载
- 长列表采用虚拟滚动
- 频繁操作的数据使用计算属性缓存
- 组件按需加载
// 图片懒加载示例
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('@/assets/loading.gif')
})以上实现方案可根据具体需求进行调整，建议结合UI框架如Element UI或Vant加速开发流程。实际项目中还需考虑登录状态、支付流程等完整业务链路的实现。
