# vue-wechat-demo

**Repository Path**: luowenjie98/vue-wechat-demo

## Basic Information

- **Project Name**: vue-wechat-demo
- **Description**: 一个仿pc微信的纯vue项目，不包含服务端
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 4
- **Created**: 2022-06-24
- **Last Updated**: 2025-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一个模仿PC微信客户端的纯前端vue项目

> 项目地址<br/>
github:  https://github.com/TomHusky/vue-wechat-demo <br/>
gitee:  https://gitee.com/luowenjie98/vue-wechat-demo



****在线demo:**** https://tomhusky.github.io/vue-wechat-demo/


目前已经完成的功能点有

- 登录
- 页面拖拽移动
- 好友聊天
- 群聊
- 消息通知提醒，免打扰，不显示聊天框
- 表情消息，图片消息，文件消息
- 通讯录
- 加好友，创建群聊
- 好友头像查看信息

#### 登录页面

![image](https://user-images.githubusercontent.com/48705045/175519803-c012d26c-1866-443d-b203-8fe26acb04be.png)

#### 主页面
![image](https://user-images.githubusercontent.com/48705045/175519972-1eaa6605-9579-4b75-8617-147d596e9c5e.png)


#### 好友侧边栏
![image](https://user-images.githubusercontent.com/48705045/175520263-cf8dd72a-b07c-487f-acff-5636868449e1.png)

#### 群聊侧边栏
![image](https://user-images.githubusercontent.com/48705045/175520283-a1ffde86-4661-49f4-a05d-6d02bad1900e.png)

#### 表情 文件 图片 消息
![image](https://user-images.githubusercontent.com/48705045/175520014-517656da-90f7-4e69-bdba-816262649a2f.png)

#### 图片放大预览
![image](https://user-images.githubusercontent.com/48705045/175520306-32010674-f0e4-4207-a5b4-cd3478967863.png)

#### 通讯录
![image](https://user-images.githubusercontent.com/48705045/175520326-8579f9b1-620a-403c-bf59-bed065ec6198.png)

#### 信息弹出框
![image](https://user-images.githubusercontent.com/48705045/175520091-556e7986-521e-4f89-bb1a-92ecf1af9f17.png)

### 聊天列表右击菜单
![image](https://user-images.githubusercontent.com/48705045/175520113-93e09516-3807-4a43-a3a8-7165d6747a4a.png)






## 项目启动


### 安装依赖
```
npm install
```

### 启动服务
```
npm run serve
```

### 构建输出
```
npm run build
```