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 文档碎片
Jul 13 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
手机端转换rem适应
Apr 01 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
关于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文本数据库的搜索方法
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php的ajax简单实例
2014/02/27 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
Python学习思维导图(必看篇)
2017/06/26 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python实现贪吃蛇小游戏
2020/03/21 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
医护人员英文求职信范文
2013/11/26 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
竞职演讲稿范文
2014/01/11 职场文书
文科生自我鉴定
2014/02/15 职场文书
写给老婆的检讨书
2014/02/21 职场文书
小学运动会入场口号
2015/12/24 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Django显示可视化图表的实践
2021/05/10 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL