运用Vue2举行的仿手机QQ的webapp的制造，在ui上，参考了设想师kaokao的作品，作品由个人自力开辟，源码中举行了细致的解释。 因为本身也是初学Vue2，所以解释写的不够精简，请包涵。
如今已完成： 团体数据的活动，接入谈天机器人，信息左滑删除，个人信息侧边栏, 搜刮挚友功用…..
项目地点： https://github.com/jiangqizhe…
动态图预览
侧边栏与个人主页
滑动删除
对话功用
搜刮
团体ui
以上是项目引见，背面就进入正题，聊聊开辟过程当中踩到的一些坑，处理方案，以及个人感悟
关于踩到的坑与处理方案
一像素
处理方案有好几种，原本想着用css3缩放处理，厥后细致看了看结果，倏忽发明用不到1px边线，因而不了了之。
规划,兼容性
重要采纳flex规划，参考阮一峰先生的Flex 规划教程。
单元
因为懒，所以运用了 vh，vw，觉得吧，兼容性彷佛也没啥大题目。
关于输如笔墨时，软键盘弹出，遮挡底部输入框
运用scrollIntoView()要领，在输入框取得核心时，设置定时器实行scrollIntoView(false),输入框落空核心时消灭定时器，圆满处理。
关于谈天时对话内容保持在底部
不晓得为啥，scrollTop的值一向是0，断了我想用js掌握内容转动的主意。因而干脆在最下方设置了一锚点，在每次输入信息或许组件更新时，模仿点击锚点，如许就使谈天界面一向保持在最下方了……要领虽然粗犷，但怎样有用，而且临时未找到scrollTop一向为0的缘由（。
关于接入谈天机器人api碰到的跨域题目
早先，无邪的以为官方应当供应了jsonp用的接口，然则没有找到。然则题目老是要处理的，功用也得完成，因而就在webpack的零时Dev中写了向机器人api的要求，把webapp起的零时服务器做中转层，然后前端代码直接要求webapp服务器供应的api，如许就圆满的避开的跨域限定。（项目顶用的谈天机器人是图灵机器人，有须要的自行百度）
关于监听for轮回衬着dom内容是不是完成
发生这个需求后，找到了一个要领，nextTick()在下次 DOM 更新轮回完毕以后实行耽误回调,然后发明在碰到的场景中彷佛，并没有发生应有的结果，多是我代码毛病，所以为了偷懒，就临时设置了一个延时一秒实行的定时器，后续会做出修正。
关于左滑删除
把父级宽度设置为120%然后摆布浮动内容，监听touchstart与touchmove事宜
关于Vue不能检测应用索引直接修正的数组中值的变动
在看教程时关于这部份，没有太甚在乎，以至于背面现实写的时刻，不晓得那里出了题目，因而转头翻全能的教程，发明，居然不能用索引变动数组中的值，因而豁然开朗….得用splice（）
关于ui的一些吐槽
项目中运用的ui是muse-ui，运用它地道是因为觉得跟设想稿挺搭，在此之前没有运用过（之前运用的是饿了吗的轮子），现实运用时发明一些小题目，ui的许多接口没有供应，比方，想在输入框上设置事宜，想要对avatar组件中的图片设置懒加载等…。以至于想要去修正ui组件，别的muse供应了单组件的加载，然则因为是个人作品。重要做测试用，所以就直接团体引入了。
还有些其他零零碎碎的大小题目，横竖这俩天谷歌百度频次显著有了增添
个人感悟
重假如对vuex理解了许多，在此之前，只写过一些简朴的小例子，当时以为，vuex（Flux 架构）彷佛有种节外生枝的觉得，然则在这个个人项目中，因为数据量的增添致使了庞杂度的多少度增添，使得Vuex成为了我的必需品，不可思议假如组件间的数据通讯照样运用父子间通讯，或许设置一个数据中心的要领，会是怎样的杂沓。
Flux 架构就像眼镜：您自会晓得什么时刻须要它。
末了，因为作者只是个新手，所以迎接交换，写这篇文章的内容也是愿望可以协助到一些，正在进修vue中的小伙伴们，别的愿望给个Star，作为第一次写较庞杂的个人demo的我来讲，照样比较愿望获得人人的承认。
