vue-仿手机qq的demo

简介: 概述这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐页面效果展示效果展示免责声明本项目为开源项目,如有类同,纯属巧合。

概述

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

页面效果展示

img_a8a9ebe5b241fe3fd288963d457e5be0.gif
效果展示

免责声明

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

项目已实现功能

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

新增加功能

增加了信息列表的删除,
标记可读,
置顶

存在问题

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

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

桌面及移动端测试

  • 桌面测试: 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

目录结构

<pre>

├── 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 和图片资源

</pre>

  # 安装
  npm install

  # 运行(端口8888)
  npm run dev

  # 发布
  npm run build

这个是我在github上找的一个开源项目改的代码用来练手,提高vue的开发能力的的demo

源码地址:github地址 喜欢的话就添加个star吧 !

相关文章
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3235 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
7月前
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
8月前
|
JavaScript 前端开发 算法
【vue系列-01】vue初级入门以及demo实现详解
【vue系列-01】vue初级入门以及demo实现详解
92 0
uniapp手机号授权登录-现在只能通过手机号授权登录,后台来获取用户信息了效果demo(整理)
uniapp手机号授权登录-现在只能通过手机号授权登录,后台来获取用户信息了效果demo(整理)
|
7月前
|
iOS开发
倒计时15分钟-兼容ios手机效果demo(整理)
倒计时15分钟-兼容ios手机效果demo(整理)
|
7月前
|
JavaScript
vue实现几秒后跳转新页面demo示例(整理)
vue实现几秒后跳转新页面demo示例(整理)
|
7月前
|
JavaScript
手机移动端返回顶部js代码demo效果示例(整理)
手机移动端返回顶部js代码demo效果示例(整理)
|
7月前
|
JavaScript
js判断手机类型demo效果示例(整理)
js判断手机类型demo效果示例(整理)
|
9月前
vue3+ts:render极简demo
vue3+ts:render极简demo
60 0
vue3+ts:render极简demo
|
12月前
|
JavaScript
Vue——03-02条件判断v-if、v-else if、v-else if以及demo切换按钮
条件判断v-if、v-else if、v-else if以及demo切换按钮
70 0