前言
第一步熟悉工程结构,就像看书前先了解书的结构和作者的思想一样,熟悉了工程结构就不容易盲人摸象。
目录结构
.
├── README.md
├── build // 工程构建文件夹,诸如webpack、postcss的配置文件
├── dist // 前端生成的资源文件(通过npm run dev/npm run prod 生成)
├── docs // 说明文档
├── index.html // 主页面
├── login.html // 登录页面
├── package.json // 项目依赖
├── regist.html // 注册页面
├── res // 图片资源文件(目前nos的资源全在网易的cdn服务器上,这里是给开发者的一个备份示例)
├── server.js // 运行工程的node入口脚本
├── src
│ ├── App.vue // 应用页面模板入口,即被main.js挂载
│ ├── configs // 配置文件
│ │ ├── emoji.js // 表情包相关
│ │ └── index.js // 工程相关
│ ├── login.js // 登录页面对应的js
│ ├── main.js // 应用页面主入口
│ ├── pages // 具体页面UI逻辑(具体下文会展开)
│ ├── plugins // 适配于vue的插件
│ │ ├── inline-worker.js // recorder依赖此文件。
│ │ ├── recorder.js // 录音相关的js
│ │ ├── toastPlugin.js // 对vux中的ToastPlugin在使用上的简单封装。
│ │ └── touchEvent.js // 触摸插件。hold(长按) tap(短按) swiperight(右划) swipeleft(左划)等
│ │
│ ├── regist.js // 注册页面对应的js
│ ├── router // 路由文件
│ ├── sdk // 云信webSdk文件
│ │ ├── NIM_Web_SDK_v5.8.0.js // 没用到
│ │ └── NIM_Web_SDK_v6.1.0.js // 用到了
│ │
│ ├── store // 数据驱动的管理中心
│ │ ├── actions // 异步数据变更请求提交
│ │ ├── index.js // vuex数据中心入口
│ │ ├── mutations // 同步操作数据变更
│ │ └── state.js // 数据中心变量声明
│ │
│ ├── themes // 主要公共UI样式库
│ │ ├── common
│ │ │ ├── animation.css // 切页动画及其他css3动画
│ │ │ ├── base.css // 基准样式
│ │ │ ├── grid.css // 布局样式,一般以g-开头
│ │ │ ├── module.css // 模块样式,一般以m-开头
│ │ │ ├── unit.css // 单元样式,一般以u-开头
│ │ │ └── weui.css // 用于重置vux/weUi默认样式
│ │ ├── theme.css // 直接可替换的公共皮肤配置1
│ │ ├── theme1.css // 直接可替换的公共皮肤配置2
│ │ └── theme2.css // 直接可替换的公共皮肤配置3
│ │
│ └── utils // js工具库
│ ├── cookie.js // 读写cookie工具
│ ├── index.js // 其他通用工具函数
│ ├── md5.js // md5加密工具
│ ├── page.js // 页面跳转工具,以及判断路由是否是主导航页
│ ├── pinyin.js // 收录常用汉字6763个,用于按姓名拼音做排序分类。
│ └── polyfill.js // 拓展Array支持find和findIndex
└── ssh // https的密钥
├── cert.pem
└── key.pem
文件说明
src
pages
.
├── Chat.vue // 聊天页面
├── ChatHistory.vue // 聊天历史记录
├── Contacts.vue // 通讯录
├── General.vue // 通用页面
├── NameCard.vue // 好友名片
├── NameCardRemark.vue // 好友名片-设置备注
├── Room.vue // 直播间
├── RoomChat.vue // 直播聊天页
├── RoomChatActor.vue // 直播聊天页-主播信息
├── RoomChatList.vue // 直播聊天页-直播互动
├── RoomChatMember.vue // 直播聊天页-在线成员
├── SearchUser.vue // 好友名片-搜索好友/群
├── Session.vue // 最近消息列表(会话)
├── SysMsgs.vue // 系统消息
├── TeamCard.vue // 群名片
├── TeamInvite.vue // 邀请好友-加入群
├── TeamList.vue // 群列表
├── TeamManage.vue // 群管理
├── TeamMemberCard.vue // 群成员名片
├── TeamMembers.vue // 群成员列表
├── TeamMsgReceiptDetail.vue // 群消息回执详情页
├── TeamSendMsgReceipt.vue // 发送群消息回执页
├── TeamSetting.vue // 群设置
└── components // 业务组件
├── ChatEditor.vue // 聊天页面下面的“文字编辑区域”
├── ChatEmoji.vue // 聊天页面下面的“文字编辑区域”要用的表情包组件
├── ChatItem.vue // 聊天页面上面的“聊天内容列表”中的每一条子项
├── ChatList.vue // 聊天页面上面的“聊天内容列表”
├── FullscreenImg.vue // 查看大图
├── Loading.vue // 页面加载中
├── NavBar.vue // 顶部导航条
└── TeamMember.vue // 群消息回执详情页的“已读or未读”下面的成员列表