基于 Vue3 开发的小米商城官网模仿项目

src/
├── api/                 # API请求封装
├── assets/              # 静态资源
├── components/          # 通用组件
│   ├── Header.vue       # 头部导航组件
│   ├── Footer.vue       # 页脚组件
│   ├── ProductCard.vue  # 商品卡片组件
│   ├── Carousel.vue     # 轮播图组件
│   └── CategoryNav.vue  # 分类导航组件
├── composables/         # 组合式函数
├── router/              # 路由配置
├── stores/              # 状态管理
├── utils/               # 工具函数
├── views/               # 页面视图
│   ├── Home.vue         # 首页
│   ├── ProductList.vue  # 商品列表页
│   ├── ProductDetail.vue # 商品详情页
│   ├── Cart.vue         # 购物车页
│   ├── Checkout.vue     # 结算页
│   └── Login.vue        # 登录页
└── App.vue              # 根组件

<!-- components/Header.vue -->
<template>
  <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-2 text-sm">
      小米14系列新品发布，立即抢购 >
    </div>
    
    <!-- 主导航 -->
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <a href="/" class="flex items-center">
          <img src="@/assets/logo.png" alt="小米Logo" class="h-10 w-auto">
        </a>
        
        <!-- 导航菜单 - 桌面端 -->
        <nav class="hidden md:flex space-x-8 ml-10">
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">首页</a>
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">手机</a>
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">电视</a>
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">笔记本</a>
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">家电</a>
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">新品</a>
          <a href="#" class="text-dark hover:text-primary transition-colors duration-200">社区</a>
        </nav>
        
        <!-- 用户工具 -->
        <div class="flex items-center space-x-4">
          <div class="relative hidden md:block">
            <input type="text" placeholder="搜索商品" class="w-64 py-2 px-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-primary">
              <i class="fa fa-search"></i>
            </button>
          </div>
          
          <a href="#" class="relative text-dark hover:text-primary transition-colors">
            <i class="fa fa-shopping-cart text-xl"></i>
            <span class="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
          </a>
          
          <a href="#" class="text-dark hover:text-primary transition-colors">
            <i class="fa fa-user text-xl"></i>
          </a>
          
          <!-- 移动端菜单按钮 -->
          <button class="md:hidden text-dark hover:text-primary transition-colors" @click="toggleMobileMenu">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden bg-white border-t" v-show="mobileMenuOpen">
      <div class="container mx-auto px-4 py-3">
        <div class="flex flex-col space-y-3">
          <a href="#" class="text-dark hover:text-primary py-2 border-b border-gray-100">首页</a>
          <a href="#" class="text-dark hover:text-primary py-2 border-b border-gray-100">手机</a>
          <a href="#" class="text-dark hover:text-primary py-2 border-b border-gray-100">电视</a>
          <a href="#" class="text-dark hover:text-primary py-2 border-b border-gray-100">笔记本</a>
          <a href="#" class="text-dark hover:text-primary py-2 border-b border-gray-100">家电</a>
          <a href="#" class="text-dark hover:text-primary py-2 border-b border-gray-100">新品</a>
          <a href="#" class="text-dark hover:text-primary py-2">社区</a>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue';

const mobileMenuOpen = ref(false);

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value;
};

// 滚动监听，改变导航栏样式
const header = ref(null);

const handleScroll = () => {
  if (window.scrollY > 50) {
    header.value.classList.add('shadow-md');
  } else {
    header.value.classList.remove('shadow-md');
  }
};

window.addEventListener('scroll', handleScroll);

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<!-- components/ProductCard.vue -->
<template>
  <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 cursor-pointer">