Vue模仿手机qq的示例代码(演示)

vue简介

Vue.js(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。Vue只关注视图层，采用自下而上的增量开发设计。Vue的目标是通过尽可能简单的API实现响应和组合视图组件的数据绑定。Vue很容易学。本教程基于VUE 2 . 1 . 8版测试。

摘要

这是一个开源项目的源代码，发现于16年9月。修改后的项目未来会有很大的不同，项目的目标是与QQ保持一致

页面效果显示

放弃

这个项目是一个开源项目。如果有相似之处，那纯粹是巧合。

该项目已实现其功能

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

新添加的功能

如何添加信息猎豹删除，标记可读，置顶

存在的问题

删除事件、顶部事件和标记事件的触发区域已经移动。原因正在调查中。欢迎您的评论

注：开发笔记、填坑、技术栈等相关文章请访问我的掘金个人主页

桌面和移动测试

桌面测试：npm运行dev后，打开开发者工具F12，模拟手机预览Ctrl Shift M (Chrome)手机测试：npm运行dev后，在cmd命令行输入ipconfig(win)即可获得局域网内的ip地址技术栈

vue-clivue 2 vue-routervexaxiostyluswebpack 2 muse-ui

目录结构

readme . MDbuild//build service and webpack configconfig//不同环境下的项目配置 dist //项目构建目录index.html//project条目文件package.json/.项目配置文件mock data . JSON//项目虚拟数据(模拟数据)srccommon//common CSS style |components//各种组件路由器//用于存储路由的文件夹the relatedmuse-ui . configVue //模板文件条目main.js//webpack预编译条目静态//css js Install npm install # to run(端口8888)NPM run dev # to publish NPM run build。这是我在github上找到的一个开源项目，用来练习和提高vue的开发能力。

源地址：github地址，喜欢就加个星吧！

摘要

以上是边肖介绍的Vue模仿手机qq的示例代码(演示)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！