关于vue在实时聊天的app使用的一些总结(前端)

背景

最近开发了一款实时聊天的app，主要功能包括：
1. 注册
2. 登录
3. 个人中心管理(包括密码、昵称、头像等)
4. 好友管理
5. 群聊天管理
6. 实时聊天(群、好友)
7. 消息提醒推送

技术栈

前端:
- vue (前端框架)
- vuex (全局数据管理)
- muse-ui (谷歌的一款ui框架，感觉做聊天挺不错)
- axios (请求后台数据)
- websocket (实时通讯)
- better-scroll (滑动效果)

项目结构

build、config…这些不用说太多，想必大家使用过vue-cli都有所了解了。主要谈谈src下的结构吧
- assets 存放一些打包后需要使用的一些静态图片
- css 这里面我只放了一个reset.css
- pages 所有的页面开发都将放在这里面
- plugins 自己写的一些插件，这个项目中仅有Loading以及Toast
- router 路由文件夹， 这里面我放了两个一个是routes.js 和index.js，routes.js 主要是管理所有的路由，对所有路由在这里进行加载export的对象用于在index.js的new Router方法所需要传入的routes参数，这里我是这样理解的，router、routes两个名字的概念是不同的，router指的是路由管理者主要对路由进行一些配置等，而routes指的是一组路由信息，当然route就是单一的一个路由信息，所以我会在index.js中写一些对Router对象的配置，比如写一些公用的方法例如goBack回退方法挂载在router.prototype上。
- server 服务请求文件夹, 其中也分为两个文件，一个是index.js 一个是commonServices.js, index.js是对aioxs的一些默认配置比如timeout、baseURL等，而commonServices.js主要是写了一些公用的处理方法，对数据的取、请求等。
- store vuex管理文件夹
- utils 公用方法文件夹 包括localStorage.js 、 Websocket.js、 dateFormat.js

好吧，我想有的童鞋可能会问干嘛建那么多文件夹，比如公用的方法写在一个utils.js文件里不就好了么，嗯其实也不是不可以，只是我个人比较喜欢每个文件的代码量都尽量精简一些，需要什么直接import就好而不是把所有的东西都放在一个文件里面，比如我把utils里的文件的方法都提取到一个文件里面，因为是一个团队开发，如果你写了某个新方法没有在文件开头写好注释别人就不一定知道你多加了一个方法，我上一家公司就是这样，当时是使用的ng1.0+，都是前年的事了，一个公用方法文件里放了n个人的公用方法，然后一个文件的代码量就有几千行。当时也是
多人共同开发一个项目，如果今天两个人都改了这个文件里的东西然后到晚上一提交代码就发生冲突，如果我们做好模块化尽量让单个方法一个文件这样既不会发生冲突，并且如果一个人新写了一个方法也不用打开文件去开就知道xx新写了一个方法，岂不是美滋滋。
当然如果你是一个开发一个项目那么你想怎么玩儿就怎么玩儿~

具体功能实现

1. 注册、登录： 我想这个不用讲太多吧，使用v-model绑定数据，然后调用axios请求后台数据就行了
2. 个人中心管理(包括密码、昵称、头像等): 这个模块的话我是在用户登录后将用户的一些相关信息都存入vuex中， 因为app端的话 一般会把修改昵称、密码、手机等都分为多个页面，所以在每个页面都可能会用到一些用户的相关信息，那么使用vuex的核心就是在多个组件页面中会用到共享的数据，那么就将这些数据放在vuex中来进行管理。至于头像，好吧这个app我们不是用户自定义上传头像，是qq最开始本地存一些图片，然后用户信息中保存图片相应的url，来读取本地图片的。
3. 好友管理、群聊天室管理: 这里包括了群和好友的增、删、改、查，个人觉得做过信息系统的应该也不会有什么大的难度吧，需要注意的就是数据的绑定，建议把当前好友信息以及当前群信息也放在vuex中进行管理，因为拿好友举例，查询到了好友在用户信息显示页面会用到好友信息，然后添加后进入聊天室也会用到好友信息，进行备注也会用到好友信息，因此建议还是放在vuex中进行一个统一的管理。其次就是回退方法，比如进入好友聊天室页面，可能是通过:
   
   • 好友列表->好友聊天室
   • 聊天记录列表 ->好友聊天室
   • 好友备注 ->好友聊天室
   • 添加好友 ->好友聊天室
     那么我们就不能统一的使用window.history.go(-1)来回退，而是要进行分别的处理，那么这里就需要用到vue-router中的from对象了&#