feat: 初始化前端项目基础架构

添加项目基础文件结构，包括Vue3+TypeScript配置、路由管理、状态管理和基础页面组件

doc/开发文档.md

@@ -0,0 +1,85 @@
+# TaotaoWang 前端开发思路
+
+## 一、项目概述
+TaotaoWang 是一个电商前端项目，采用现代化的技术栈，实现了响应式设计，提供良好的用户体验。
+
+## 二、页面结构设计
+页面采用经典的上中下三栏布局：
+
+### 1. 顶部区域
+- **导航栏**：包含网站 logo、主导航菜单（首页、分类、品牌、活动等）
+- **搜索框**：支持商品搜索，带有搜索历史记录和自动补全功能
+- **用户中心入口**：登录/注册、购物车、个人中心等快捷入口
+
+### 2. 中部区域
+- **分类标签**：水平排列的商品分类标签，支持点击切换
+- **滚动广告**：轮播图展示热门活动、新品推荐等内容
+- **推荐模块**：根据用户行为推荐相关商品
+
+### 3. 底部区域
+- **商品列表**：
+  - 商品卡片设计：每个商品为独立小方盒，包含图片、名称、价格、销量等信息
+  - 分页加载：初始展示30个商品，下拉滚动时继续加载，最多加载至90个商品
+  - 加载机制：使用 Intersection Observer API 实现无限滚动
+- **底部信息**：
+  - ICP备案信息
+  - 版权声明
+  - 联系方式
+  - 友情链接
+
+## 三、技术栈
+- **框架**：Vue 3 + TypeScript
+- **构建工具**：Vite
+- **路由**：Vue Router
+- **状态管理**：Pinia（可选）
+- **UI组件库**：可考虑引入 Element Plus 或自定义组件
+- **HTTP请求**：Axios
+- **样式**：CSS3 + SCSS（可选）
+
+## 四、核心功能实现
+
+### 1. 无限滚动加载
+- 使用 Intersection Observer API 监听滚动事件
+- 维护商品列表状态，控制加载数量上限（90个）
+- 实现加载状态提示和空状态处理
+
+### 2. 分类标签与滚动广告
+- 分类标签支持点击切换和高亮显示
+- 轮播广告支持自动播放、手动切换和指示器
+
+### 3. 商品卡片设计
+- 响应式布局，适配不同屏幕尺寸
+- 悬停效果和交互反馈
+- 图片懒加载优化
+
+## 五、性能优化
+- 图片懒加载
+- 组件按需加载
+- 数据缓存策略
+- 减少不必要的HTTP请求
+
+## 六、开发流程
+1. 需求分析与设计
+2. 技术栈选型与搭建
+3. 基础架构开发
+4. 组件开发与测试
+5. 功能集成与联调
+6. 性能优化与测试
+7. 部署与上线
+
+## 七、项目结构
+```
+src/
+├── assets/          # 静态资源
+├── components/      # 公共组件
+│   ├── Header.vue   # 头部组件
+│   ├── Footer.vue   # 底部组件
+│   ├── GoodsCard.vue # 商品卡片组件
+│   └── Carousel.vue  # 轮播图组件
+├── views/           # 页面视图
+│   └── Home.vue     # 首页
+├── route/           # 路由配置
+├── services/        # API服务
+├── utils/           # 工具函数
+└── main.ts          # 入口文件
+```