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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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
我的论坛源代码(七)
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
Yii配置文件用法详解
2014/12/04 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
前端性能优化建议
2020/09/17 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
淘宝活动总结范文
2014/06/26 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
项目安全员岗位职责
2015/02/15 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Python制作一个随机抽奖小工具的实现
2021/07/07 Python