前言

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

技术栈

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

项目地址

（建议使用chrome浏览器的手机模式浏览）

项目经验总结

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

写在最后

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