V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lensh
V2EX  ›  Vue.js

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

  •  1
     
  •   lensh · 2017-08-08 10:46:03 +08:00 · 1837 次点击
    这是一个创建于 2425 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3237 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 10:51 · PVG 18:51 · LAX 03:51 · JFK 06:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.