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


Posted in Javascript onSeptember 08, 2017

vue简介

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

概述

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

页面效果展示

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

免责声明

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

项目已实现功能

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

新增加功能

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

存在问题

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

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

桌面及移动端测试

  • 桌面测试: 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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
js遍历td tr等html元素
Dec 13 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
关于Ajax的原理以及代码封装详解
Sep 08 #Javascript
vue父子组件的嵌套的示例代码
Sep 08 #Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
通过button将form表单的数据提交到action层的实例
Sep 08 #Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 #Javascript
JavaScript实现图片拖曳效果
Sep 08 #Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 #Javascript
You might like
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
php实现小程序支付完整版
2018/10/09 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
JS实现图片切换效果
2018/11/17 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python动态监控日志内容的示例
2014/02/16 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
经典优秀个人求职信分享
2013/12/12 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
小学生美德少年事迹
2014/02/02 职场文书
销售内勤岗位职责
2014/04/15 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL