vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)

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

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

  • 项目已实现功能

    • 对话功能——想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话。
    • 左滑删除——左滑删除相关消息。
    • 搜索页面——点击右上角搜索按钮,能够进入搜索页面,输入对应的单词或者数字,动态查找好友。
    • 项目中数据流动由vuex进行控制

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

  • 动态图预览

  侧边栏及个人主页

  

  滑动删除

  

  与机器人进行对话

  

  搜索界面

  

  tab键切换页面,整体ui

  

  技术栈

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

  

  其他说明

    •   由于是抱着边写边学的心态,所以可能会出现些不严谨的地方,或者明显的错误,关于这点,看到请反馈给我,十分感谢。
    •   从零到目前的进度,虽然功能简单,但还是花费了不少时间,把项目上传是希望能够对一些同样正在学习Vue的小伙伴有一些帮助。
    •   由于是第一次独立的写较为完整的Vue项目,所以希望大家给个Star! Q.o,并且欢迎讨论。

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

      欢迎交流,希望能对vue学习中的小伙伴有一定的借鉴意义,由于是作者第一次写较复杂的个人项目,所以代码有不完善的地方请谅解,目前项目正在更新中,可以持续关注进度哦。

时间: 2024-10-13 18:23:51

vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)的相关文章

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂.但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登陆.注册.用户信息等等,常常会让我们很头疼.既然还没人用vue写过这样的项目,那不如我来写,开源出来对能看到的人也会有帮助. 这种功能性的项目很实用但是往往也很枯燥,没有音乐播放器那么看起来绚

一款基于vue2.0的分页组件---写在页面内

通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 1 .page { 2 font-weight: 900; 3 height: 40px; 4 text-align: center; 5 color: #888; 6 margin: 20px auto 0; 7 background: #f2f2f2; 8 } 9 10 .pagelist { 11

基于zepto.js的模仿手机QQ空间的大图查看组件ImageView.js

调用方式 :ImageView(index,imgData)  --index参数 为图片默认显示的索引值,类型 为Number  --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: /* * ImageView v1.0.0 * --口袋蓝房网 基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,Number --i

仿手机QQ列表支持下拉,上滑,滑动删除

一般安卓程序员都知道下拉刷新主键用 com.handmark.pulltorefresh 网站:https://github.com/chrisbanes/Android-PullToRefresh/ 滑动删除用 fortysevendeg 的 swipelistview 但是要实现QQ列表功能,需要把两者叠加起来,我尝试了一下,发现有Bug, fortysevendeg的代码有点复杂,放弃了,后来自己搞了一个,为了方便广大 安卓程序员,我把整个demo贡献出来. 下载地址:http://pan

仿手机QQ网络状态条的显示

http://www.xiami.com/collect/44404927 http://www.xiami.com/collect/44405353 http://www.xiami.com/collect/44405736 http://www.xiami.com/collect/44429232 http://www.xiami.com/collect/44429684 http://www.xiami.com/collect/44430176 http://www.xiami.com/c

Android:仿手机QQ好友动态的ListView

1.介绍: 本博客使用XListView模仿Android版QQ好友动态的ListView效果.效果截图例如以下: 效果图1 效果图2 这里面主要涉及的是ListView的布局问题,让我们看一下Item的布局文件吧. <?xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&

仿手机QQ消息小红点动画2

前言 上一篇把动画的实现步骤大致理清,需要确认小尾巴的绘制区域,关键就是确定4个顶点的位置.大家可以根据需要,选择不同的计算方式. 今天,要实现: 文字的添加 尾巴拉长用弧形代替直线 下面是现在的效果图: 文字添加 为了简单,这里对文字的颜色字体等属性不提供接口,而只是在内部设置固定的值:提供一个类方法生成对象.如: + (instancetype)zzspringViewWithText:(NSString *)text; 在这个方法里面需要做: 根据text内容,确定文字绘制的图形区域 根据

android自定义View实现图片上传进度显示(仿手机QQ上传效果)

首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看一下我实现的效果: 1.效果已经看见了,下面我们来实现它.首先我创建一个android工程ProgressImageView.然后我们重写ImageView控件,创建ProcessImageView类代码如下: package com.example.processimageview; import android.annotation.SuppressLint; import android.content.Context;

iOS浏览器不能打开手机QQ客服与指定用户聊天界面

做项目的时候,客户要求手机和PC端都可以通过点击按钮,跳转到QQ直接进行聊天.使用QQ通讯组件后发现移动端IOS系统不能进行跳转,找了很多资料,并进行测试找到了解决方法,做一下记录,方便后期使用. 一般PC端用的链接是: tencent://message/?uin=扣扣号码&Site=公司名称&Menu=yes 移动端的链接是: mqqwpa://im/chat?chat_type=wpa&uin=扣扣号码&version=1&src_type=web 修改后,移