# 空中课堂2.0 老师端 ## 环境准备 ``` // 先手动安装 npm install electron@5.0.8 --arch=ia32 // 再安装其他依赖 npm install ``` ### electron调试启动 ``` npm run serve ``` ### electron打包编译 ``` npm run build ``` ## 第三方依赖 本项目中 使用第三方库(vuex-simple)进行store的管理及使用,可以从github上找相关的资料进行了解 https://github.com/sascha245/vuex-simple ## 目录结构 ``` ├─src ├─main.ts // 入口 ├─app.g.less // css样式 ├─themes.g.less ├─App.vue ├─background.ts ├─views // 分类页面 | ├─login // 登陆相关页面(同方负责) | | ├─login.vue | | └login.vue.ts | ├─living // 直播课堂(榕树家) | | ├─ChatList.vue // 聊天列表组件 | | ├─ChatList.vue.ts | | ├─living.vue // 直播间框架 | | ├─living.vue.ts | | ├─LivingTitleBar.vue // 直播间标题栏 | | ├─LivingTitleBar.vue.ts | | ├─StudentList.vue // 学生列表组件 | | ├─StudentList.vue.ts | | ├─StudentState.vue // 学生动图组件 | | ├─StudentState.vue.ts | | ├─VideoPlayer.vue // 视频播放器组件 | | └VideoPlayer.vue.ts | ├─course // 课程管理(同方同事负责) | | ├─course.vue | | └course.vue.ts ├─styles // 样式文件 | ├─badges.less | ├─buttons.less | ├─checkboxes.less | ├─classes.less | ├─custom-icons.less | ├─index.less | ├─inputs.less | ├─mixins.less | ├─sl-vue-tree.less | ├─tables.less | ├─tooltips.less | └_variables.less ├─store // Vuex store 模块目录 | ├─index.ts | ├─store.ts // 主Store | ├─modules | | ├─foo.ts // 测试的Store | | └living.ts // 直播课堂子模块Store ├─services // 封装服务 ├─living // 直播课堂相关服务 ├─router // 路由管理 | └index.ts ├─fonts // 矢量字体图标 | └icomoon.woff ├─components // 公用组件 | ├─Tabs.vue // tabs组件 | ├─Tabs.vue.ts | ├─TitleBar.vue // 标题栏组件 | └TitleBar.vue.ts ├─assets // 静态资源 | ├─logo.png | ├─images | | ├─living_title_icon.png | | ├─win_close.png | | ├─win_hide.png | | └win_max_min.png ``` ## 开发注意 service目录,views目录,store目录是开发中主要涉及的三个地方,为了减少不必要的沟通成本,代码文件各自的目录中进行区分开,比如上面的目录结构中,榕树家负责的部分,同方不要参与,同方负责的部分,榕树家不参与。