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

项目地址

github: https://github.com/TomHusky/vue-wechat-demo

gitee: https://gitee.com/luowenjie98/vue-wechat-demo

目前已经完成的功能点有

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

登录页面

主页面

好友侧边栏

群聊侧边栏

表情 文件 图片 消息

图片放大预览

通讯录

信息弹出框

聊天列表右击菜单

项目启动

安装依赖

npm install

启动服务

npm run serve

构建输出

npm run build

Vue仿微信PC客户端的更多相关文章

  1. 手动清空微信PC客户端数据

    微信PC客户端,用久了之后,会产生大量数据,包括聊天记录.聊天图片.视频等等,非常占存储空间,除非很重要的聊天记录或文件,建议额外保存,其他的可以手动删掉就好,可以节省存储空间. 1.找到[C:\Us ...

  2. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  3. Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat

    基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...

  4. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  5. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  6. 微信PC客户端无法发送图片，怎么解决？

    今天登陆电脑的微信客户端,无法发送截图图片,该怎么办? 解决方法 1.在任务栏找到程序,右键找到设置

  7. vue 仿微信朋友圈9张图上传功能

    项目需求要求用户上传商品的时候可以一次性上传9张图,多余9张提示‘只能上传9张图’,并且每张图右上角有个删除按钮,图片也可以点击放大. 出来的效果图如下: 话不多说,上代码: <el-form- ...

  8. electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

    一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息 ...

  9. 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-腾讯云后台配置TXIM

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

  10. [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊

    Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...

随机推荐

  1. iOS 如何保持线程一直在运转

    1.简单的可以想到,写一个while循环 while (TRUE) { } 但是这种方式存在缺陷,将导致CPU占用100%,两个核. p.p1 { margin: 0; font: 12px &quo ...

  2. 分享下最近基于Avalonia UI和MAUI写跨平台时间管理工具的体验

    起因 几个月前,我在寻找一款时间管理软件,类似番茄时钟的工具,但是希望可以自定义时间. 需要自定义的场景 做雅思阅读,3篇文件需要严格控制时间分配,需要一个灵活的计时器 定期提醒,每30分钟需要喝水或 ...

  3. kettle从入门到精通 第三十三课 再谈 kettle 表输出 分区/分片

    1.之前第九章有讲过kettle 表输出步骤,里面有简单的提到过表输出步骤里面的表分区设置,这里详细介绍下. 表分区数据:选择此选项可根据"分区"字段中指定的日期字段的值将数据拆分 ...

  4. 硬件开发笔记（十七）：RK3568底板电路串口、485、usb原理图详解

    前言   原理图有一些常用电路.  本篇就将集中常用电路分析完,如uart口,涉及usart串口.rs485.usb口.   串口   串行接口简称串口,也称串行通信接口或串行通讯接口(通常指COM接 ...

  5. 在线SQL格式化工具推荐

    在线SQL格式化工具,一键美化.整理您的SQL代码,支持多种数据库语法格式化.有效提升代码可读性,方便团队协作与快速定位问题,是开发人员必备的SQL编程助手,让复杂查询更清晰,更易于维护. 在线SQL ...

  6. 《Vue3.x +TpyeScript实践指南》勘误

    图书出版已有一段时间,书中已发现错误如下: 书的第14页,倒数第3行,npm init -y命令中,init和-y之间应该有个空格: 书的第32页,代码的第1行,应该为模板字符串符号 `,我看印刷的是 ...

  7. xshell+ssh+网络+加密

    使用xshell+ssh用于管理linux服务器,大概是目前最为流行的方式. 这个工具和技术涉及到: 计算机网络 加密解密 虽然不是专门的系统工程师,但还是相对频繁使用这套工具,有时候难免遇到一些不知 ...

  8. 【golang】json数据中复杂key的处理

    例1 type Transport struct { Time string Id int } func main() { //将struct的切片包装成json格式 var st []Transpo ...

  9. python重拾第十二天-MYSQL数据库

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql 1. 数据库介 ...

  10. 网络OSI七层模型及各层作用 tcp-ip

    背景 虽然说以前学习计算机网络的时候,学过了,但为了更好地学习一些物联网协议(MQTT.CoAP.LWM2M.OPC),需要重新复习一下. OSI七层模型 七层模型,亦称OSI(Open System ...