BestProductviews

专业的产品评测和排名网站，提供详细的产品对比、专家评分和购买指南。

🚀 快速开始

1. 安装依赖

# 安装根目录依赖（用于数据同步）
npm install

# 安装前端依赖
cd frontend
npm install

2. 配置环境变量

创建 .env 文件：

GOOGLE_CREDENTIALS={"type":"service_account",...}
GOOGLE_SHEET_ID=1BXwuRvEldz0ceifKjLOdo5zPTvqelVd0_FwjlXRV9HQ

3. 运行开发服务器

npm run dev

访问：http://localhost:5173

---

📊 数据管理

更新榜单数据

1. 编辑 Google Sheets

   • 访问 Google Sheets 文档
   • 修改产品信息

2. 同步数据到本地

   npm run sync

3. 提交并部署

   git add frontend/public/data/*.json
   git commit -m "Update product data"
   git push

详细说明请参考：UPDATE_DATA.md

---

📁 项目结构

BestProductviews/
├── frontend/              # Vue 3 前端应用
│   ├── src/
│   │   ├── components/   # Vue 组件
│   │   ├── views/        # 页面视图
│   │   ├── composables/  # 组合式函数
│   │   └── router/       # 路由配置
│   ├── public/
│   │   └── data/         # 产品数据 JSON 文件 ⚡
│   └── package.json
│
├── scripts/              # 数据管理脚本
│   ├── sync-sheets.js    # 同步 Google Sheets 数据
│   ├── setup-sheets.js   # 初始化 Google Sheets
│   └── import-from-json.js  # 导入现有数据
│
├── docs/                 # 文档
│   └── archive/          # 历史文档存档
│
├── .env                  # 环境变量（不提交到 Git）
├── package.json          # 根项目配置
└── README.md             # 本文件

---

🔧 可用命令

# 数据同步
npm run sync          # 从 Google Sheets 同步数据

# 开发
npm run dev           # 启动开发服务器
npm run build         # 构建生产版本
npm run preview       # 预览生产构建

---

🛠️ 技术栈

前端

• Vue 3.5 - 渐进式 JavaScript 框架
• Vite 7.2 - 下一代前端构建工具
• Vue Router 4 - 官方路由管理器
• TailwindCSS - 实用优先的 CSS 框架

数据管理

• Google Sheets API - 数据源
• Node.js - 脚本运行环境
• googleapis - Google API 客户端库

部署

• 可部署到任何静态托管服务
• 支持 Kubernetes、Docker 容器化部署
• 数据以静态 JSON 文件形式打包，加载速度极快（< 50ms）

---

📝 数据工作流

┌─────────────────────────────────────────────┐
│  1. 编辑 Google Sheets                      │
│     └─ 产品信息、评分、特性等               │
└─────────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────────┐
│  2. 运行 npm run sync                        │
│     └─ 生成 frontend/public/data/*.json     │
└─────────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────────┐
│  3. Git 提交 JSON 文件                      │
│     └─ 版本控制，可追溯历史                 │
└─────────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────────┐
│  4. 部署到生产环境                          │
│     └─ 用户访问：读取静态 JSON（超快！）   │
└─────────────────────────────────────────────┘

---

📚 文档

• UPDATE_DATA.md - 数据更新完整指南
• GOOGLE_SHEETS_SETUP.md - Google Sheets 配置说明
• HOW_TO_ADD_NEW_RANKING.md - 添加新榜单类目

---

🌟 特性

• ⚡ 极快加载 - 静态 JSON 文件，< 50ms 响应时间
• 📊 Google Sheets 管理 - 无需编程，轻松更新数据
• 🔄 版本控制 - 数据变更可追溯
• 📱 响应式设计 - 完美支持移动端
• 🎯 SEO 友好 - 静态内容，搜索引擎易索引

---

📦 当前榜单类目

1. Jump Starters (汽车应急启动电源)

   • 路径：/jump-starter
   • 数据：frontend/public/data/jump-starter.json

2. Tire Inflators (车载充气泵)

   • 路径：/tire-inflator
   • 数据：frontend/public/data/tire-inflator.json

3. Dash Cams (行车记录仪)

   • 路径：/dash-cam
   • 数据：frontend/public/data/dash-cam.json

4. Air Dusters (压缩空气除尘器)

   • 路径：/air-duster
   • 数据：frontend/public/data/air-duster.json

---

🤝 贡献

需要添加新的榜单类目？请参考 HOW_TO_ADD_NEW_RANKING.md

---

📄 许可证

Private - All rights reserved

---

最后更新： 2025-12-17