vue实现水果商场

Vue 实现水果商城的核心步骤

项目初始化与配置

使用 Vue CLI 或 Vite 创建项目，安装基础依赖（Vue Router、Pinia/Vuex、Axios）。配置路由和状态管理模块，例如：

// router/index.js
const routes = [
  { path: '/', component: Home },
  { path: '/product/:id', component: ProductDetail }
]

页面结构设计

• 首页布局：顶部导航栏（含购物车图标）、轮播图广告位、水果分类筛选区、商品瀑布流展示区
• 商品卡片组件：包含图片、名称、价格、加入购物车按钮，使用 v-for 动态渲染数据
• 购物车页面：显示已选商品列表，支持数量增减和结算功能

数据管理方案

通过 Pinia 或 Vuex 管理全局状态，例如：

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addItem(product) {
      // 添加商品逻辑
    }
  }
})

API 交互实现

创建 api/fruits.js 封装网络请求：

export const getFruits = () => axios.get('/api/fruits')
export const getFruitDetail = (id) => axios.get(`/api/fruits/${id}`)

关键功能实现

• 购物车动画：使用 Vue Transition 实现添加商品时的飞入动画
• 本地存储：通过 localStorage 持久化购物车数据
• 筛选功能：计算属性实现价格区间和分类筛选

  computed: {
  filteredFruits() {
    return this.fruits.filter(fruit => 
      fruit.price >= this.minPrice && 
      fruit.category === this.selectedCategory
    )
  }
  }

样式与优化

• 使用 SCSS 编写模块化样式
• 实现响应式布局（@media 查询）
• 配置 Vue 异步组件实现路由懒加载

部署准备

• 配置生产环境变量
• 生成静态文件部署到 Nginx 或云服务
• 可选接入微信小程序（通过 uni-app 改造）

技术栈扩展建议

1. UI 库加速开发：可选用 Element Plus 或 Vant 快速搭建界面
2. TypeScript 集成：提升代码维护性
3. Mock 数据方案：开发阶段使用 Mock.js 模拟 API
4. 性能优化：图片懒加载、组件按需加载

典型功能代码示例

商品卡片组件：

<template>
  <div class="fruit-card">
    <img :src="item.image" @click="$router.push(`/detail/${item.id}`)">
    <h3>{{ item.name }}</h3>
    <p>¥{{ item.price }}</p>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script setup>
const props = defineProps(['item'])
const cartStore = useCartStore()

const addToCart = () => {
  cartStore.addItem(props.item)
}
</script>