vue-miniQQ————基于Vue2实现的仿手机QQ单页面应用

https://github.com/jiangqizheng/vue-MiniQQ

概述

使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释。 由于自己也是初学Vue2,所以注释写的不够精简,请见谅。

项目地址 https://github.com/jiangqizheng/vue-MiniQQ

项目已实现功能

  • 对话功能——想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话。

  • 左滑删除——左滑删除相关消息。

  • 搜索页面——点击右上角搜索按钮,能够进入搜索页面,输入对应的单词或者数字,动态查找好友。

  • 项目中数据流动由vuex进行控制

注:对于那句Flux 架构就像眼镜:您自会知道什么时候需要它。感觉好像懂了点什么。

桌面及移动端测试

  • 桌面测试: npm run dev 后,打开***开发者工具*** F12,模拟手机预览 Ctrl+Shift+M (Chrome)
  • 移动端测试: npm run dev 后,在cmd命令行中输入ipconfig(win)获取到局域网内ip地址后,生成二维码,然后进行测试(建议微信扫二维码)

动图预览

gif图好像被压缩的太多了,感兴趣的可以clone后查看。

微信列表的滑动交互

搜素组件的动画效果

进入对话框

对话框信息

首页Tab切换


技术栈

  • vue-cli
  • vue2
  • vue-router
  • vuex
  • axios
  • stylus
  • webpack2
  • muse-ui

问题反馈

建议移步Issues,欢迎反馈项目中的不良/错误表现,以及你在开发过程遇到的问题,作者会积极回复。

感谢

感谢您的来访 ,如果对于您有帮助 ,麻烦您使劲的给个Star吧 ! ^_^

其他说明

  • 由于是抱着边写边学的心态,所以可能会出现些不严谨的地方,或者明显的错误,关于这点,看到请反馈给我,十分感谢。

  • 从零到目前的进度,虽然功能简单,但还是花费了不少时间,把项目上传是希望能够对一些同样正在学习Vue的小伙伴有一些帮助。

  • 由于是第一次独立的写较为完整的Vue项目,所以希望大家给个Star! Q.o,并且欢迎讨论。

Build Setup

一个正在制作中的基于vue2全家桶(vue2+vue-router+vuex)的仿QQ项目,移动端webapp,持续更新中·

# 安装
npm install# 运行(端口8888)
npm run dev# 发布
npm run build

基于vue2全家桶实现的,仿移动端QQ相关推荐

  1. Vue2全家桶+Element搭建的PC端在线音乐网站

    目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 1,前言 项目基于Vue2全家桶及网易云音乐 Node Api实现,网站风格简约清新,体验比较流畅. 下载地址:https://gi ...

  2. 基于vue2全家桶开发的匿名朋友圈及聊天应用

    前言 学习了vue全家桶后一直想找个机会来写一个完整一点的项目,这次学校举办的比赛就是一个很好的契机.由于是自己瞎搞搞,所以写起来比较随心所欲,没有过多地从设计和产品的角度去思考.这个项目包括了图片上 ...

  3. 基于Vue2全家桶的移动端AppDEMO实现

    好久没更新过Vue的小文章,上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能,然后通过cordova打包生成apk,移动端表现还不错,今天把这个小东西分享出来,希望有更多的 ...

  4. 基于Vue全家桶制作的的高仿美团APP

    美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...

  5. 基于vue2+nuxt构建的高仿饿了么(2018版)

    基于vue2+nuxt构建的高仿饿了么(2018版) 前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节 ...

  6. 网易云音乐接口+vue全家桶开发一款移动端音乐webApp

    网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我 效果图: 骨架屏 首页 侧边栏 每日推荐 歌单 播放器(小) 播放器(大) 详细信 ...

  7. vue音乐笔记_基于vue全家桶的移动端音乐web app

    项目描述 这是一个基于 Vue2.x 和网易云音乐 API制作的移动端 web app 项目:由于是出于练习和实验的目的,因此并非是网易云音乐 app 的替代品,目前也没有涵盖全部的功能: 该项目主要 ...

  8. 基于React全家桶开发「网易云音乐PC」项目实战(一)

    网易云音乐PC项目实战 项目简介 1.项目介绍 项目使用到的技术栈 CSS使用Flex进行布局 配置路径别名使用: carco 项目路由使用: react-router来管理 使用react-rout ...

  9. Vue2全家桶之一:vue-cli(vue脚手架)超详细教程

    vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成 vue-cli这个构建工具大大降低了 ...

  10. 基于Vue 全家桶实现网易云音乐 WebApp

    基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓 ...

最新文章

  1. 图形显卡_显卡缺货?专业图形卡主机方案演示,Quadro P2200
  2. cent os mysql下载_Cent OS 6.4安装mysql
  3. 让linux启动更快的方法
  4. 【 MATLAB 】协方差 cov以及协方差矩阵基础知识
  5. Dtree【树形下拉框】
  6. [译] 12步轻松搞定python装饰器 - 简书
  7. Matlab中legend位置
  8. 计算机图形学在GIS中的应用,GIS在交通中的应用与发展
  9. TensorFlow 调用预训练好的模型—— Python 实现
  10. leetcode python3 简单题217. Contains Duplicate
  11. 以太坊 2.0、分片、DAG、链下状态通道……概述区块链可扩展性的解决方案!
  12. 女博士实名举报北航人工智能教授:性骚扰!
  13. MySQL安装之后如何启动
  14. 解决修改jsp代码之后,浏览器刷新页面却没有变化
  15. 微型计算机内存与外存的区别,计算机的内存 和外存一样吗?
  16. 不同平台下移植x264
  17. sis防屏蔽程序_程序员如何写一份更好的简历
  18. 真正的顶尖高手:既有将才,又有帅才
  19. 使用Beaglebone Black的PRU(二)——Hello World!
  20. 无监督学习算法Autoencoder

热门文章

  1. electron安装报错: Electron failed to install correctly…的解决方案
  2. OpenGL ES:相机预览添加滤镜效果
  3. 一文带你明白什么是浏览器插件?
  4. Android 支付宝支付密码输入界面
  5. 李智慧 - 架构师训练营总览
  6. 停课不停学致家长的一封信
  7. 选票统计 SDUT
  8. linux系统中如何打开察看img文件内容
  9. leetcode LCP3 机器人大冒险(C++)
  10. `算法竞赛题解` LCP 03. 机器人大冒险