# PixelScope_Frontend

**Repository Path**: largebigsuper/PixelScope_Frontend

## Basic Information

- **Project Name**: PixelScope_Frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-07
- **Last Updated**: 2025-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PixelScope Frontend

基于 Nuxt 3 + TailwindCSS 的摄影器材查询系统前端界面，支持服务端渲染 (SSR)

## 🚀 快速开始

```bash
# 安装依赖
npm install

# 配置环境变量
cp .env.example .env

# 开发模式 (SSR)
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 🔧 环境配置

创建 `.env` 文件并配置：

```env
API_BASE_URL=http://localhost:8000/api/v1
NUXT_SSR=true
```

## 📁 项目结构

```
pages/
├── devices/
│   ├── [id].vue          # 设备详情页
│   └── index.vue         # 设备列表页
├── brands/
│   └── [slug].vue        # 品牌介绍页
└── compare.vue           # 产品对比页
```

## 🎯 已实现页面

| 页面 | 路由 | 功能 |
|------|------|------|
| 设备列表 | `/devices` | 搜索过滤、排序、分页 |
| 设备详情 | `/devices/[id]` | 产品信息、参数、推荐 |
| 产品对比 | `/compare` | 双产品参数对比 |
| 品牌介绍 | `/brands/[slug]` | 品牌历史、产品展示 |

## 🛠️ 技术栈

- **Nuxt 3** - Vue.js 全栈框架
- **TailwindCSS** - 原子化CSS框架
- **Composition API** - Vue 3 组合式API

## 📱 特性

- ✅ 响应式设计，移动端优先
- ✅ 服务端渲染 (SSR)，优化 SEO 和首屏加载
- ✅ 模块化组件设计
- ✅ API 代理配置，支持服务端和客户端调用
- ✅ 错误处理和降级机制

## 🔗 SSR 实现

项目已实现服务端渲染，数据在服务端获取并渲染到 HTML：

```javascript
// 服务端数据获取
const { data } = await useLazyAsyncData('key', async () => {
  return await getProducts()
})
```

### 测试 SSR

访问 `/test-ssr` 页面查看 SSR 是否正常工作。在浏览器中查看网页源代码，数据应该已经在 HTML 中。

## 📝 开发规范

- 使用 Composition API
- TailwindCSS 样式优先
- 组件props/emits明确定义
- SEO标签完整配置