Vue仿手机qq的实例代码(demo)

vue简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

概述

这是一个16年9月份找的开源项目源代码，结合自己的实际情况进行的修改项目，以后内容将会有很大的不同，项目的目标是向QQ看齐

页面效果展示

免责声明

本项目为开源项目，如有类同，纯属巧合。

项目已实现功能

侧边栏
联系页面
动态页面
信息列表
搜索好友
对话页面
信息列表左右滑动

新增加功能

怎加了信息猎豹的删除，
标记可读，
置顶

存在问题

删除事件，置顶事件和标记事件的触发区域发生了位移，正在排查原因，欢迎各位指教

注：项目的开发注意事项，填坑，以及技术栈等相关文章请访问我的掘金个人主页

桌面及移动端测试

  • 桌面测试： npm run dev 后，打开 开发者工具 F12 ，模拟手机预览 Ctrl+Shift+M (Chrome)
  • 移动端测试： npm run dev 后，在cmd命令行中输入ipconfig（win）获取到局域网内ip地址

技术栈

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

目录结构

├── README.md
 ├── build         // 构建服务和webpack配置
 ├── config        // 项目不同环境的配置
 ├── dist         // 项目build目录
 ├── index.html      // 项目入口文件
 ├── package.json     // 项目配置文件
 ├── mockdata.json     // 项目伪数据（模拟数据）
 ├── src
 │  ├── common      // 公用的css样式
 |  ├── components    // 各种组件
 │  ├── router      // 存放路由的文件夹
 │  ├── vuex       // 存放Vuex的相关
 │  ├── muse-ui.config.js // muse-ui单组件加载配置
 │  ├── App.Vue      // 模板文件入口
 │  └── main.js      // Webpack 预编译入口
 ├── static        // css js 和图片资源
# 安装
 npm install
 # 运行（端口8888）
 npm run dev
 # 发布
 npm run build

这个是我在github上找的一个开源项目改的代码用来练手，提高vue的开发能力的的demo

源码地址：github地址 喜欢的话就添加个star吧 ！

总结

以上所述是小编给大家介绍的Vue仿手机qq的实例代码(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析--> <div class="publish_container"> <p contenteditable

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

  • Vue插件写、用详解（附demo）

    Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一段代码等 2.使用方法 总体流程应该是: [声明插件]--[写插件]--[注册插件]--[使用插件] 写插件和声明插件是同步的,然后注册到Vue对象中(不用担心重复注册),最后在写Vue组件的时候使用写的插件 声明插件 先写一个js文件,这个js文件就是插件文件,里面的基本内容如下: /* 说明: * 插件文件:service

  • vue实现添加标签demo示例代码

    vue实现添加标签demo示例代码

    本篇文章主要介绍vue添加标签,废话不多说了,下面上具体代码 效果如下: html <div id="app"> <div style="margin-bottom: 4px;"> <span class="selectedItem" v-for="item in selectedItems">{{item.name}} <i class="red fa fa-close (

  • vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

    vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

    前言 最近练习Vue,看到官方文档中的嵌套路由,不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅. demo截图: Demo简单介绍 主路由:Top250(charts),正在热映(hot),即将上映(ing),新片榜(newmovie) const router = new VueRouter({ routes: [ { path: '/', //设置默认路由为Top250 compon

  • Vue仿手机qq的实例代码(demo)

    Vue仿手机qq的实例代码(demo)

    vue简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 免责声明 本项目为开源项目,如有类同,纯属巧合.

  • Android仿手机QQ图案解锁功能

    Android仿手机QQ图案解锁功能

    本文实例为大家分享了Android仿手机QQ图案解锁的具体代码,供大家参考,具体内容如下 ps:请不要再问我,为什么导入之后会乱码了. 其实,代码基本上都是从原生系统中提取的:LockPatternView.加密工具类,以及解锁逻辑等,我只是稍作修改,大家都知道,原生系统界面比较丑陋,因此,我特意把QQ的apk解压了,从中拿了几张图案解锁的图片,一个简单的例子就这样诞生了. 好了,废话不多说,我们来看看效果(最后两张是最新4.4系统,炫一下,呵呵): 1.最关健的就是那个自定义九宫格View,代

  • react native 仿微信聊天室实例代码

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As

  • Vue 莹石摄像头直播视频实例代码

    Vue 莹石摄像头直播视频代码. HTML代码: <div class="mainClass" v-show="rtmp_url!=''"> <video id="myPlayer" controls playsinline webkit-playsinline autoplay> <source type="application/x-mpegURL" :src="http_url&q

  • Android自定义手机界面状态栏实例代码

    Android自定义手机界面状态栏实例代码

    前言 我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现这个效果有两个方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActi

  • android开发仿ios的UIScrollView实例代码

    今天重新装了编译器,结果崩无极限,真是日了狗了了.刚刚才知道问题在哪边. 好了,说正事,对于ios开发我没接触,不是很了解,百度了半天,差不多就是UIScrollView的把.如果不对,请指证.具体什么效果呢,我刚才拿朋友的iphone手机看了下,iphone的设置界面,第一个列表往下拉可以继续滚,上拉同理.不过android好像没有自带的这种情况. 我把这种效果称为滚无极限的scollview. 下面就来上源码: 首先,最最最重要的就是判断当前视图是否为空,你空视图滚不滚好像没啥区别,除了an

  • vue超时计算的组件实例代码

    vue超时计算的组件实例代码

    需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算. 效果如下(此处只是demo效果,所以有点丑.) 父页面 <template> <div> <div class="dateDiv" :key="index" v-for="(item,index) in TimeArray"> <p>{{item.name}}</p>

  • Vue 列表上下过渡效果的实例代码

    最近有个需求,一个列表上下移动要有简单过渡效果,在网上找了找没找到,可能是我搜的关键词不对? 试了试 Vue 的 transition-group ,也没有达到预期的效果,然后就花了点时间做了一个操作Demo. 最终效果 某列的数据由 X 位置上升到 Y 位置的过渡效果 技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点,哈哈哈 实现方式 这个过渡效果一共由三部分组成: 在 Y行 位置插入 X行 位置的数据,添加一个高度展开效果,并使该行的数据不可见

  • 在vue中使用vue-echarts-v3的实例代码

    特征 •轻量,高效,按需绑定事件 •支持按需导入ECharts.js图表​​和组件 •支持组件调整大小事件自动更新视图 一.安装 npm install --save echarts vue-echarts-v3 二.用法 用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件 1.webpack 1.x 修改成如下 { test: /\.js$/, loader: 'babel', include: [ path.join(prjRoot,

随机推荐