仿手机qq html源码,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)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！