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 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php变量范围介绍
2012/10/15 PHP
php动态函数调用方法
2015/05/21 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js切换光标示例代码
2013/10/10 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python简明入门教程
2015/08/04 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python编写打字训练小程序
2019/09/26 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
物业管理求职自荐信
2013/09/25 职场文书
初一英语教学反思
2014/01/11 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
党员党性分析材料
2014/02/17 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大学生实训报告总结
2014/11/05 职场文书
校园开放日新闻稿
2015/07/17 职场文书