[b]概述[/b] 使用Vue2进行的仿手机QQ的webapp的制作，在ui上，参考了设计师kaokao的作品，作品由个人独立开发，源码中进行了详细的注释。 由于自己也是初学Vue2，所以注释写的不够精简，请见谅。 项目地址 [url=https://github.com/jiangqizheng/vue-MiniQQ]https://github.com/jiangqizheng/vue-MiniQQ[/url] [b]项目已实现功能[/b] [list] [*]对话功能——想着既然是QQ总要能进行对话交流，所以在项目中接入了图灵聊天机器人，可以与列表中的每个人物进行对话。[/*] [*]左滑删除——左滑删除相关消息。[/*] [*]搜索页面——点击右上角搜索按钮，能够进入搜索页面，输入对应的单词或者数字，动态查找好友。[/*] [*]项目中数据流动由vuex进行控制[/*] [/list] 注：对于那句Flux 架构就像眼镜：您自会知道什么时候需要它。感觉好像懂了点什么。 [b]计划中或者即将实现的功能[/b] [list] [*]注册，登陆功能[/*] [*]添加，删除好友，好友列表分组展示[/*] [*]拨号界面，多人聊天、qq群[/*] [*]空间，好友说说，点赞、图片分享[/*] [*]个人设置，切换主题[/*] [/list] 注：以上内容都是经过考虑，能够较完美的实现的内容，部分功能已经在制作中，由于本项目是个长期的项目，所以对于后续进度感兴趣的朋友也可以关注下，并且如果有想到什么好主意，欢迎告诉我。 [b]桌面及移动端测试[/b] [list] [*]桌面测试： npm run dev 后，打开***开发者工具*** F12，模拟手机预览 Ctrl+Shift+M (Chrome)[/*] [*]移动端测试： npm run dev 后，在cmd命令行中输入ipconfig（win）获取到局域网内ip地址后，生成二维码，然后进行测试（建议微信扫二维码）[/*] [*][/*] [/list] [b]动图预览[/b] gif图好像被压缩的太多了，感兴趣的可以clone后查看。 [b]侧边栏与个人主页[/b] [img]http://files.jb51.net/file_images/article/201703/201733093015413.gif?201723093031[/img] [b]搜素组件的动画效果[/b] [img]http://files.jb51.net/file_images/article/201703/201733093103423.gif?201723093116[/img] [b]进入对话框[/b] [img]http://files.jb51.net/file_images/article/201703/201733093129291.gif?201723093149[/img] [b]对话框信息[/b] [img]http://files.jb51.net/file_images/article/201703/201733093236719.gif?201723093246[/img] 首[b]页Tab切换[/b] [img]http://files.jb51.net/file_images/article/201703/201733093303998.gif?201723093313[/img] [b]更新说明[/b] [list] [*]对更多内容进行详细的注释，修正了左滑删除的一些错误，现在能够对消息进行正常的左滑删除，然后在朋友列表进行对话就能重新生成聊天队列了（可以删除信息后再继续与机器人进行对话了），另外扩大了删除按钮的宽度————3.28[/*] [/list] [b]问题反馈[/b] 建议移步Issues，欢迎反馈项目中的不良/错误表现，以及你在开发过程遇到的问题，作者会积极回复。 [b]感谢[/b] 感谢您的来访 ，如果对于您有帮助 ，麻烦您使劲的给个Star吧 ！ ^_^ [b]其他说明[/b] [list] [*]由于是抱着边写边学的心态，所以可能会出现些不严谨的地方，或者明显的错误，关于这点，看到请反馈给我，十分感谢。[/*] [*]从零到目前的进度，虽然功能简单，但还是花费了不少时间，把项目上传是希望能够对一些同样正在学习Vue的小伙伴有一些帮助。[/*] [*]由于是第一次独立的写较为完整的Vue项目，所以希望大家给个Star! Q.o，并且欢迎讨论。[/*] [*]此项目会在我Vue的使用过程中不断被完善优化，并且用于测试添加一些新的有趣的功能。[/*] [/list] [b]技术栈[/b] [list] [*]vue-cli[/*] [*]vue2[/*] [*]vue-router[/*] [*]vuex[/*] [*]axios[/*] [*]stylus[/*] [*]webpack2[/*] [*]muse-ui[/*] [/list] [b]目录结构[/b] . ├── README.md           ├── build              // 构建服务和webpack配置,转发聊天机器人以及ajax获取用户数据相关内容 ├── config             // 项目不同环境的配置 ├── dist               // 项目build目录 ├── index.html         // 项目入口文件 ├── package.json       // 项目配置文件 ├── mockdata.json      // 项目模拟数据 ├── src │   ├── common         // 公用的css样式 │   ├── components     // 各种组件 │   ├── router         // 存放路由的文件夹 │   ├── vuex          // 存放Vuex的相关 │   ├── App.Vue        // 模板文件入口 │   └── main.js        // Webpack 预编译入口 ├── static             // css js 和图片资源 │   [b]Build Setup[/b] 一个正在制作中的基于vue2全家桶(vue2+vue-router+vuex)的仿QQ项目，移动端webapp，持续更新中· 以上所述是小编给大家介绍的基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！