Vue仿手机qq的实例代码(demo)

这篇文章主要为大家详细介绍了Vue仿手机qq的实例代码(demo)，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

vue简介

 

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

 

概述

 

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

 

页面效果展示

 

【q1010.com温馨提示：图片暂缺】

 

免责声明

 

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

 

项目已实现功能

 

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

 

新增加功能

 

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

 

存在问题

 

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

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

 

桌面及移动端测试

 

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

本文来自：http://www.q1010.com/184/3806-0.html

注：关于Vue仿手机qq的实例代码(demo)的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js