CaptainJike / vue3-wechat

【开发中】使用 Vite + Vue3 + AntDesignVue + Pinia + MockJS 搭建的复刻PC微信客户端项目

Home Page:https://ele-cat.github.io/vue3-wechat/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue3 WeChat

  • 使用 Vite + Vue3 + AntDesignVue + Pinia + MockJS 搭建的复刻新版微信项目
  • 目前进度:基础功能搭建完毕,精细化细节点
  • 查看演示

功能截图

功能截图

使用

安装

npm install

运行

yarn serve

打包

yarn build

功能点

  • 界面主体
    • 拖动
    • 缩放
    • 置顶
    • 最小化
    • 最大化
    • 关闭
  • 工具栏
    • 用户头像
    • 聊天
    • 通讯录
    • 收藏
    • 聊天文件
    • 朋友圈
    • 小程序
    • 手机
    • 设置及其他
      • 锁定、解锁
      • 意见反馈
      • 设置
  • 列表栏
    • 聊天
      • 搜索
      • 发起群聊
      • 最后一条消息发送/接收时间
      • 最后一条消息发送/接收内容
      • 预设小爱同学 API
      • 普通用户
        • 置顶、取消置顶
        • 标为未读、标为已读
        • 消息免打扰、开启新消息提醒
        • 在独立窗口中打开
        • 不显示聊天
        • 删除聊天
      • 群聊
        • 置顶、取消置顶
        • 标为未读、标为已读
        • 消息免打扰、开启新消息提醒
        • 修改群聊名称
        • 设置备注
        • 在独立窗口中打开
        • 保存到通讯录
        • 不显示聊天
        • 删除聊天
      • 订阅号
    • 通讯录
      • 搜索
      • 添加朋友
      • 通讯录管理
      • 新的朋友
      • 公众号
      • 群聊
        • 发消息
        • 设置备注
        • 从通讯录中删除
        • 退出群聊
      • 朋友
        • 发消息
        • 标为星标朋友、取消星标朋友
        • 发送名片
        • 删除朋友
    • 收藏
      • 搜索
      • 新建笔记
      • 分类
      • 标签
      • 空间占用
  • 功能区域
    • 聊天
      • 顶部标题
      • 展开更多信息
      • 聊天记录
      • 朋友头像【查看更多信息】
      • 聊天内容【文本、图片、语音、视频】
      • 聊天时间
      • 加载之前的聊天记录【分页】
      • 表情
      • 发送文件
      • 截图
      • 聊天记录
      • 通过快捷键发送消息
      • 语音聊天
      • 视频聊天
    • 通讯录
      • 新的朋友
      • 公众号
      • 群聊
      • 朋友
    • 收藏
      • 列表
      • 详情

使用的插件

参考文档、博客

About

【开发中】使用 Vite + Vue3 + AntDesignVue + Pinia + MockJS 搭建的复刻PC微信客户端项目

https://ele-cat.github.io/vue3-wechat/

License:MIT License


Languages

Language:Vue 78.8%Language:JavaScript 18.3%Language:HTML 1.7%Language:Less 1.2%