一个模仿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. 7.30考试总结(NOIP模拟28)[遗忘之祭仪·客星璀璨之夜·割海成路之日]

    一个人有表里两面,你能看到的,仅仅是其中一面而已. 前言 看着这套题非常不可做,但是经历的所有的模拟赛中,这次还是第一次切题(惭愧) 本来 T1 我 1h 就码完了,交了一遍 TLE90 然后后来两个 ...

  2. C#开源实用的工具类库，集成超过1000多种扩展方法

    前言 今天大姚给大家分享一个C#开源(MIT License).免费.实用且强大的工具类库,集成超过1000多种扩展方法增强 .NET Framework 和 .NET Core的使用效率:Z.Ext ...

  3. pandas基础--层次化索引

    pandas含有是数据分析工作变得更快更简单的高级数据结构和操作工具,是基于numpy构建的. 本章节的代码引入pandas约定为:import pandas as pd,另外import numpy ...

  4. linux Centos8系统，防火墙配置常用命令，systemctl 和firewall

    本文环境:Linux系统CentOS 8.2 64bit CentOS 7版本及以上版本较centos 6有较大改动,例如:采用systemctl命令来开启service,它是服务管理中主要的工具,融 ...

  5. INFINI Labs 产品更新 | Easysearch 支持 SQL 查询、Console 告警功能支持邮件等多渠道

    INFINI Labs 产品又更新啦~.本次更新概要如下:Easysearch 新增 SQL 插件和JDBC 驱动,支持 SQL 查询,支持 SQL 常用函数等:Console 针对告警功能做了升级优 ...

  6. FlashDuty Changelog 2023-09-07 | 新增深色模式与主题配置

    FlashDuty:一站式告警响应平台,前往此地址免费体验! FlashDuty 现在已经全面支持了深色模式,这为您提供了更柔和的光线和舒适的界面外观.并且,您可以根据自己的喜好和使用环境动态切换深色 ...

  7. 项目管理--PMBOK 读书笔记（11）【项目风险管理】

    1.风险分解结构(RBS): RBS 有两个含义,一个是资源分解结构(Resource),一个是风险分解结构(Risk). 1)技术风险 2)管理风险 3)商业风险 4)外部风险   2.核对单 核对 ...

  8. xxlJob Cron表达式 0 0 8,13 * * ?

    xxlJob Cron表达式  0 0 8,13 * * ? Cron有如下两种语法格式:(1)Seconds Minutes Hours DayofMonth Month DayofWeek Yea ...

  9. Elasticsearch如何聚合查询多个统计值，如何嵌套聚合？并相互引用，统计索引中某一个字段的空值率？语法是怎么样的？

    目录 Elasticsearch聚合查询说明 空值率查询DSL Elasticsearch聚合基础知识扩展 Elasticsearch聚合概念 Script 用法 Elasticsearch聚合查询语 ...

  10. Vim的移动大法

    Vim的移动大法 移动光标的按键 "h" 向左移动 "j"向下移动 "k"向上移动 "l"向右移动 在单词之间移动 注: ...