Vue仿PC微信
前言
学习Vue也有一段时间了，作为一个热爱代码的码农，在感受Vue的魔性之后，也开始迫不及待去搞搞事情。本文采用(vue+vue-router+vuex+es6+stylus) 来实现一个仿PC端微信的小demo，还使用了一个智能api，实现智能对话。欢迎大家对鄙人提出宝贵意见，相互学习讨论，一起进步。
demo地址
demo描述
页面
分为三个页面，分别是好友页面，聊天页面，还有个人信息（一波小广告。。。）
功能
- 聊天记录将会被保存到localStorage中，刷新之后记录依然存在。
- 在搜索栏可以输入你想搜索的值，列表会过滤出对应的好友。
- 聊天列表负责展示可聊天的好友。包括最后一条信息的时间和内容。点击不同的好友对话可以与不同的好友发送信息
- 在输入框中可以选择表情。发送完信息之后，聊天列表中会对最后一条信息的内容时间进行相应改变。
- 可以在好友列表中选择好友并给他发送信息，聊天列表中没有该好友会添加该好友对话，已经存在的话会自动选择到选择的好友对话。
- 使用了一个api，会根据发送的信息，返回相应的对话。达到智能聊天的效果。( 已经在存好友列表中，叫做机器人 )
由于微信pc页面不多，效果图不是特别明显，最好可以进预览地址体验一下下。
1.png
2.png
3.png
4.png
5.png
难点和问题
虽说在这里使用vuex有点大材小用，但是本宝宝面对各组件之间状态传递，多层嵌套的组件传参，毅然决然决定使用vuex进行数据管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。
由于接触vuex时间不久，处于边学边用的状态，踩了不少坑，总算是扛过来了。
还学到一些小技巧，类似发送消息，超出页面的时候要滑倒最底下看最后一条信息，让容器的滑动垂直位置等于其整个高度。
this.$refs.list.scrollTop = this.$refs.list.scrollHeight
但是很多时候就会忽略掉一个异步问题，我就曾踩到这个坑，甚至开始怀疑是不是解决方法写错了，实际上只要在一个异步，就可以解决。
setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
还有一些包括表情转换啊。页面上的跳转不多，基本都是些逻辑，细节。
总结
虽然只是做了个小demo，但是我感觉收获还是很大的，锻炼了一些逻辑思维，很多知识点掌握得更加的牢固，对 vue vuex 的理解又更深了一些。我觉得对于向我们这种小白，实战上尽量找一些交互多，数据量不大的（个人建议）。但是我相信技术只会越学越好，东西也会越做越好。
