前言

第一步熟悉工程结构，就像看书前先了解书的结构和作者的思想一样，熟悉了工程结构就不容易盲人摸象。

目录结构

  1. .
  2. ├── README.md
  3. ├── build                                                    // 工程构建文件夹，诸如webpack、postcss的配置文件
  4. ├── dist                                                    // 前端生成的资源文件（通过npm run dev/npm run prod 生成）
  5. ├── docs                                                    // 说明文档
  6. ├── index.html                                        // 主页面
  7. ├── login.html                                        // 登录页面
  8. ├── package.json                      // 项目依赖
  9. ├── regist.html                       // 注册页面
  10. ├── res                                                         // 图片资源文件(目前nos的资源全在网易的cdn服务器上，这里是给开发者的一个备份示例)
  11. ├── server.js                                            // 运行工程的node入口脚本
  12. ├── src
  13. │   ├── App.vue                                        // 应用页面模板入口，即被main.js挂载
  14. │   ├── configs                                        // 配置文件
  15. │   │   ├── emoji.js                            // 表情包相关
  16. │   │   └── index.js                            // 工程相关
  17. │   ├── login.js                                    // 登录页面对应的js
  18. │   ├── main.js                                        // 应用页面主入口
  19. │   ├── pages                                            // 具体页面UI逻辑（具体下文会展开）
  20. │   ├── plugins                                        // 适配于vue的插件
  21. │   │   ├── inline-worker.js            // recorder依赖此文件。
  22. │   │   ├── recorder.js                        // 录音相关的js
  23. │   │   ├── toastPlugin.js                // 对vux中的ToastPlugin在使用上的简单封装。
  24. │   │   └── touchEvent.js                    // 触摸插件。hold(长按) tap(短按) swiperight(右划) swipeleft(左划)等
  25. │   │ 
  26. │   ├── regist.js                                    // 注册页面对应的js
  27. │   ├── router                                        // 路由文件
  28. │   ├── sdk                                                // 云信webSdk文件
  29. │   │   ├── NIM_Web_SDK_v5.8.0.js    // 没用到
  30. │   │   └── NIM_Web_SDK_v6.1.0.js    // 用到了
  31. │   │ 
  32. │   ├── store                                            // 数据驱动的管理中心
  33. │   │   ├── actions                                // 异步数据变更请求提交
  34. │   │   ├── index.js                            // vuex数据中心入口
  35. │   │   ├── mutations                            // 同步操作数据变更
  36. │   │   └── state.js                            // 数据中心变量声明
  37. │   │
  38. │   ├── themes                                        // 主要公共UI样式库
  39. │   │   ├── common
  40. │   │   │   ├── animation.css            // 切页动画及其他css3动画
  41. │   │   │   ├── base.css                    // 基准样式
  42. │   │   │   ├── grid.css                    // 布局样式，一般以g-开头
  43. │   │   │   ├── module.css                // 模块样式，一般以m-开头
  44. │   │   │   ├── unit.css                    // 单元样式，一般以u-开头
  45. │   │   │   └── weui.css                    // 用于重置vux/weUi默认样式
  46. │   │   ├── theme.css                            // 直接可替换的公共皮肤配置1
  47. │   │   ├── theme1.css                        // 直接可替换的公共皮肤配置2
  48. │   │   └── theme2.css                        // 直接可替换的公共皮肤配置3
  49. │   │ 
  50. │   └── utils                                            // js工具库
  51. │       ├── cookie.js                            // 读写cookie工具
  52. │       ├── index.js                            // 其他通用工具函数
  53. │       ├── md5.js                                // md5加密工具
  54. │       ├── page.js                                // 页面跳转工具，以及判断路由是否是主导航页
  55. │       ├── pinyin.js                            // 收录常用汉字6763个,用于按姓名拼音做排序分类。
  56. │       └── polyfill.js                        // 拓展Array支持find和findIndex
  57. └── ssh                                                        // https的密钥
  58.     ├── cert.pem
  59.     └── key.pem

文件说明

src

pages

  1. .
  2. ├── Chat.vue                                        // 聊天页面
  3. ├── ChatHistory.vue                            // 聊天历史记录
  4. ├── Contacts.vue                                // 通讯录
  5. ├── General.vue                                    // 通用页面
  6. ├── NameCard.vue                                // 好友名片
  7. ├── NameCardRemark.vue                    // 好友名片-设置备注
  8. ├── Room.vue                                        // 直播间
  9. ├── RoomChat.vue                                // 直播聊天页
  10. ├── RoomChatActor.vue                        // 直播聊天页-主播信息
  11. ├── RoomChatList.vue                        // 直播聊天页-直播互动
  12. ├── RoomChatMember.vue                    // 直播聊天页-在线成员
  13. ├── SearchUser.vue                            // 好友名片-搜索好友/群
  14. ├── Session.vue                                    // 最近消息列表（会话）
  15. ├── SysMsgs.vue                                    // 系统消息
  16. ├── TeamCard.vue                                // 群名片
  17. ├── TeamInvite.vue                            // 邀请好友-加入群
  18. ├── TeamList.vue                                // 群列表
  19. ├── TeamManage.vue                            // 群管理
  20. ├── TeamMemberCard.vue                    // 群成员名片
  21. ├── TeamMembers.vue                            // 群成员列表
  22. ├── TeamMsgReceiptDetail.vue        // 群消息回执详情页
  23. ├── TeamSendMsgReceipt.vue            // 发送群消息回执页
  24. ├── TeamSetting.vue                            // 群设置
  25. └── components                                    // 业务组件
  26.     ├── ChatEditor.vue                    // 聊天页面下面的“文字编辑区域”
  27.     ├── ChatEmoji.vue                        // 聊天页面下面的“文字编辑区域”要用的表情包组件
  28.     ├── ChatItem.vue                        // 聊天页面上面的“聊天内容列表”中的每一条子项
  29.     ├── ChatList.vue                        // 聊天页面上面的“聊天内容列表”
  30.     ├── FullscreenImg.vue                // 查看大图
  31.     ├── Loading.vue                            // 页面加载中
  32.     ├── NavBar.vue                            // 顶部导航条
  33.     └── TeamMember.vue                    // 群消息回执详情页的“已读or未读”下面的成员列表