# eog-test-project

**Repository Path**: zmzmCoder/eog-test-projec

## Basic Information

- **Project Name**: eog-test-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Pinia + TailwindCSS + Vite 项目

这是一个使用 Vue3、Pinia、TailwindCSS 和 Vite 构建的现代化 Web 项目，支持响应式设计。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vue Router** - Vue.js 官方路由管理器
- **Pinia** - Vue 的状态管理库
- **TailwindCSS** - 实用优先的 CSS 框架
- **Vite** - 下一代前端构建工具

## 项目特性

- ✅ Vue 3 Composition API
- ✅ Vue Router 路由管理
- ✅ Pinia 状态管理
- ✅ TailwindCSS 响应式设计
- ✅ 登录功能（微信登录 + 手机号验证码登录）
- ✅ 用户认证状态管理
- ✅ Vite 快速开发体验
- ✅ 完整的项目结构

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
eog-test-project/
├── src/
│   ├── assets/          # 静态资源
│   │   └── main.css     # 主样式文件（TailwindCSS）
│   ├── components/      # Vue 组件
│   │   └── Card.vue     # 示例卡片组件
│   ├── views/           # 页面组件
│   │   ├── Home.vue     # 首页
│   │   └── Login.vue    # 登录页
│   ├── stores/          # Pinia stores
│   │   ├── counter.js   # 计数器 store 示例
│   │   └── auth.js      # 用户认证 store
│   ├── router/          # 路由配置
│   │   └── index.js     # 路由定义
│   ├── App.vue          # 根组件
│   └── main.js          # 应用入口
├── index.html           # HTML 模板
├── vite.config.js       # Vite 配置
├── tailwind.config.js   # TailwindCSS 配置
├── postcss.config.js    # PostCSS 配置
└── package.json         # 项目配置
```

## 响应式设计

项目使用 TailwindCSS 的响应式工具类实现移动端适配：

- `sm:` - 小屏幕（≥640px）
- `md:` - 中等屏幕（≥768px）
- `lg:` - 大屏幕（≥1024px）
- `xl:` - 超大屏幕（≥1280px）

## 开发说明

### 路由使用

项目已配置 Vue Router，支持以下路由：

- `/` - 首页
- `/login` - 登录页

```javascript
import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/login')
```

### 使用 Pinia Store

#### 计数器 Store

```javascript
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
counterStore.increment()
```

#### 用户认证 Store

```javascript
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
authStore.login({ phone: '13800138000', loginType: 'phone' })
authStore.logout()
```

### 登录功能

登录页面支持两种登录方式：

1. **手机号验证码登录**
   - 输入手机号和验证码
   - 支持验证码倒计时（60秒）
   - 表单验证

2. **微信登录**
   - 微信扫码登录界面
   - 实际项目中需要接入微信登录 API

### 使用 TailwindCSS

直接在模板中使用 TailwindCSS 工具类：

```vue
<div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- 内容 -->
  </div>
</div>
```

## 许可证

MIT