基于vue2全家桶开发的匿名朋友圈及聊天应用

前言

学习了vue全家桶后一直想找个机会来写一个完整一点的项目，此次学校举办的比赛就是一个很好的契机。因为是本身瞎搞搞，因此写起来比较为所欲为，没有过多地从设计和产品的角度去思考。这个项目包括了图片上传、发布匿名消息、点对点聊天等功能，算是一个中规中矩的练手项目，适合刚接触vue全家桶的同窗学习。

技术栈

vue2 + vuex + vue-router + webpack + websocket + es6/7 + fetch + sass

项目地址

demo预览地址（建议使用chrome浏览器的手机模式浏览） github地址

项目经验总结

1. 部署时使用了nginx的反向代理来实现跨域，同时开启了gzip压缩了静态资源的体积大小。相关文章：反向代理、gzip。
2. 前端的布局要适配不一样的屏幕大小和各类高清屏。为了解决这个问题我使用淘宝开源的Flexible方案。这个方案的原理是经过JS来检测dpr并设置meta标签，而后动态计算html标签的font-size以肯定rem的基准值。因而在写css布局时就能够使用rem单位来实现不一样屏幕的适配了。
3. 若是使用vue自带的组件间通讯api来处理数据的话，随着项目的增大数据的来源就会变得难以追踪。因此为了更好地管理前端的数据，引入了vuex来处理不一样组件间的数据共享。

写在最后

若是发现代码bug或有什么问题，欢迎issue。若是你能从中学到些什么，也欢迎点个star！