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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
JS查看对象功能代码
Apr 25 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
JS实现骰子3D旋转效果
Oct 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php修改时间格式的代码
2011/05/29 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
编程语言Python的发展史
2014/09/26 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python中Threading用法详解
2017/12/27 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python模块如何查看
2020/06/16 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Django自带的用户验证系统实现
2020/12/18 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
任课老师推荐信范文
2013/11/24 职场文书
竞选演讲稿范文
2013/12/28 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
2015年计生工作总结范文
2015/04/24 职场文书