当前位置:首页 > 日记 > 正文

Vue仿手机qq的实例代码 | demo

Vue仿手机qq的实例代码 | demo

vue简介

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

概述

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

页面效果展示

免责声明

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

项目已实现功能

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

新增加功能

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

存在问题

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

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

桌面及移动端测试

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

相关文章

怎么在word给指定段落添加边框在wo

怎么在word给指定段落添加边框在wo

边框,步骤,方法,段落,电脑软件,  在word2007使用过程中,为了使文档中的某些段落看起来更加醒目,我们可以为这些段落添加边框。下面小编就教你怎么在word给指定段落添加边框。word给指定段落添加边框的步骤1,打开需要处理的文档文件。word给…

ES6新特性六:promise对象实例详解

ES6新特性六:promise对象实例详解

新特性,对象,详解,实例,电脑软件,本文实例讲述了ES6新特性之promise对象。分享给大家供大家参考,具体如下:1. promise 介绍它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样;其次,它起到代理作用(proxy),充当异步操作与回调函数之间的…

怎么在ppt2013中设置文本虚线框

怎么在ppt2013中设置文本虚线框

设置,文本,虚线,方法,电脑软件,  PPT演讲的成功,不单单是取决于PPT使用和制作技术方面的技巧,还有制作思路方面的学问、演讲方法与技巧等诸多方面。PPT演讲的成功,不单单是取决于PPT使用和制作技术方面的技巧,还有制作思路方面的学问、演…

ECMAScript6--解构

ECMAScript6--解构

电脑软件,大致介绍解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值数组解构例子:let [a,b,c] = [1,2,3]; console.log(a); //1 console.log([a,b,c]); //[1, 2, 3]可以看到,数组中的a,b,c…

ps怎样合成多张照片

ps怎样合成多张照片

照片,方法,多张,电脑软件,ps,  照片如果感觉太单薄,大家可以使用ps来进行合成。很多刚学习的新手小伙伴可能还不知道,下面是小编带来关于ps怎样合成多张照片的内容,希望可以让大家有所收获!ps合成多张照片的方法一、将一张照片粘贴至另一张…

js css自定义分页效果

js css自定义分页效果

分页,自定义,效果,电脑软件,js,网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库效果图片先来css(样式不喜欢的话可以不用这个).pagelist {padding:10px 0; text-align:center;}.pagelist span,.pageli…

JavaScript中闭包的详解

JavaScript中闭包的详解

闭包,详解,电脑软件,JavaScript,闭包是什么在 JavaScript 中,闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。是不是看完这个定义感觉更加…

ppt怎么实现局部区域的黑底白字效

ppt怎么实现局部区域的黑底白字效

区域,白字,黑底,局部,效果,  ppt怎么实现局部区域的黑底白字效果?PPT制作是信息时代下的产物,ppt具有较好的展示功能,能够形象生动的表达意愿和目的;下面小编来告诉你吧。ppt实现局部区域的黑底白字效果的方法:  ①启动PowerPoint2003,插…

怎么在word中给文章添加脚注在word

怎么在word中给文章添加脚注在word

步骤,方法,脚注,文章,电脑软件,  在日常办公室里,我们写文档的时候有时候要注释脚注,如果是新手的话就摸不着头脑,下面小编就教你怎么在word中给文章添加脚注。word中给文章添加脚注的步骤首先打开word文本word中给文章添加脚注的步骤图1 …

node.js实现的装饰者模式示例

node.js实现的装饰者模式示例

装饰者模式,示例,电脑软件,node,js,本文实例讲述了node.js实现的装饰者模式。分享给大家供大家参考,具体如下:装饰者模式的实现更强调类的组合而不是通过继承。这样可以增强灵活性。在node.js 中,可以通过call函数实现。call函数可以在一个对…

怎么去除wrod的背景色去除wrod的背

怎么去除wrod的背景色去除wrod的背

背景色,方法,背景颜色,教程,步骤,  word的背景色大概有三种,一种是页面背景,不管有没有字,页面都是呈现背景色;还有一种所示突出显示,为了让文字突出,给其添加了背景色;最后一种是字符底纹,就是凡是有字的地方就添加上一个底纹颜色。下面小编就…

Angularjs中的ui-bootstrap的使用

Angularjs中的ui-bootstrap的使用

使用教程,电脑软件,Angularjs,ui,bootstrap,1.新建uiBootstrap.html页面,引入依赖的js和css类库2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块/** * Created by zhong on 2015/9/7. */var uiModule = angular.module("uiMo…