Vue 全家桶+Socket.io+Express/Koa2 打造网页版手机 QQ

[lensh]

Vue 全家桶+Socket.io+Express/Koa2 打造的网页版手机 QQ(web app),高仿手机 QQ7.1.0 版本

预览

在线预览地址： https://qq.lenshen.com （为了体验到最佳的效果，提供了 3 个测试账号，需要账号才能登陆哦，具体账号和密码下面有讲） 源码地址： https://github.com/lensh/vue-qq

技术栈

Vue2.0：实现前端页面构建 Vuex：实现不同组件间的状态共享 Vue-router：页面路由切换,实现单页的核心 vueg：页面复杂场景切换效果 Socket.io：实现实时消息推送 axios：一个基于 Promise 的 HTTP 库，向后端发起请求 Express、Koa2：开发环境使用 Express，生产环境使用 Koa2 ES6、ES7、ES8：服务端和客户端均使用 ES6 语法，promise/async/await 处理异步 localStorage：本地保存用户信息 Webpack：模块打包，前端项目构建工具首选 SASS(SCSS)：CSS 预处理语言 Flex：flex 弹性布局，简单适配手机、PC 端 CSS3：CSS3 过渡动画及样式 IScroll：模拟原生 app 的列表滚动效果(ListView) MySQL：MySQL 关系型数据库持久化数据（考虑到表与表之间关系复杂，需要多表查询，最复杂的时候是六张表联查，用 MySQL 会比 Mongodb 好得多） jsonp：跨域请求数据 pm2：服务端使用 pm2 部署，常驻进程，比 forever 好用得多（ https://github.com/Unitech/pm2 ） nginx：服务端使用 nginx 代理端口转发

使用方式

先将根目录下的 qq.sql 导入到你的 MySQL 数据库里(可以使用 Navicat)，用户名为 root，登录密码为空。启动 MySQL 服务。然后使用 cnpm install 安装所有依赖(最好用 cnpm 安装，因为项目依赖很多，npm 用的是国外的镜像，在网络不稳定的情况下很有可能会导致安装失败，而且下载速度远远慢于国内的 cnpm)，最后运行 npm run dev。服务器部署运行项目只需要 npm run pm2，这样就可以常驻进程，不过前提是得先全局安装 pm2。

尽量使用 Chrome 浏览器体验最佳效果。另外提供了三个测试账号，默认用户的密码都是 6 个 1:

qq:986992484 密码:111111

qq:986992483 密码:111111

qq:986992482 密码:111111

目前已经实现了 QQ 的核心功能，如消息列表、好友列表、新朋友、好友申请、实时群聊、实时私聊、聊天设置、屏蔽对方聊天、特别关心、会员等级、个性名片、添加好友、删除好友、好友分组、查找用户、登录、注销、切换用户、右滑显示滑动侧栏等等。后期会考虑增加更多功能。 如果你想体验实时聊天的酷炫效果，那么你可以打开两个浏览器，用上面不同的账号登录即可。

最后

在线预览地址： https://qq.lenshen.com 源码地址： https://github.com/lensh/vue-qq