# wechat-clone

**Repository Path**: wujiele/wechat-clone

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-10
- **Last Updated**: 2026-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信克隆项目 (WeChat Clone)

这是一个仿微信界面的移动端前端项目，使用 Vue 3 + Vite 构建。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Vue Router** - 官方路由管理器
- **Pinia** - Vue 状态管理库
- **Vant UI** - 轻量、可靠的移动端 Vue 组件库

## 功能模块

### 1. 微信（聊天）
- 聊天列表展示
- 未读消息提醒
- 点击进入聊天详情
- 实时消息发送（模拟）

### 2. 通讯录
- 字母索引快速定位
- 联系人列表
- 新的朋友、群聊、标签、公众号入口

### 3. 发现
- 朋友圈入口（带未读提醒）
- 扫一扫、摇一摇
- 看一看、搜一搜
- 附近的人、购物、游戏
- 小程序入口

### 4. 我
- 个人信息展示
- 服务、收藏、朋友圈、卡包、表情
- 设置入口

### 5. 其他页面
- 朋友圈动态流
- 小程序列表
- 公众号列表

## 项目结构

```
wechat-clone/
├── src/
│   ├── layouts/          # 布局组件
│   │   └── MainLayout.vue
│   ├── views/            # 页面组件
│   │   ├── ChatView.vue
│   │   ├── ChatDetailView.vue
│   │   ├── ContactsView.vue
│   │   ├── DiscoverView.vue
│   │   ├── MeView.vue
│   │   ├── MomentsView.vue
│   │   ├── MiniProgramsView.vue
│   │   └── OfficialAccountsView.vue
│   ├── router/           # 路由配置
│   │   └── index.js
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── index.html
├── package.json
├── vite.config.js
└── README.md
```

## 快速开始

### 安装依赖

```bash
cd wechat-clone
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000 查看应用。

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 移动端适配

项目已针对移动端进行优化：
- 响应式布局
- 触摸友好的交互
- 禁止用户缩放
- 使用 viewport 单位

## 注意事项

- 本项目为前端界面演示，不包含后端服务
- 所有数据均为模拟数据
- 图片资源使用了 Vant 的示例图片

## 许可证

MIT