Skip to content

KaminoDice/splayerx

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SPlayer

Dependencies Status devDependencies Status Build Status appveyor codecov Crowdin

开发指南

目前架构的特点在 Electron 的基础上使用了 Vue.js MVVM组件化开发框架。

  • 开发中使用 webpack,运行 npm run dev 修改代码后可以同步至表现层,hot reload,不用重新启动。
  • 使用 eslint 控制代码质量,不满足标准的代码无法通过编译并会报错。
  • 每次版本提交会通过 travis-ci 和 appveyor 自动编译,如果不能通过编译会记录错误,且相应的 badge会变红色。
  • tag 一个新的commit时,CI 工具会自动打包发行版本,并放入 GitHub Releases
  • 使用 Karma 进行单元测试,codecov的badge codecov 会显示当前代码的测试覆盖率。
  • 使用 Global Event Bus 做消息通讯
  • 使用 vue-routervuex 用于跨组件数据交互。
  • 有可能导致阻塞的操作,例如IO读写或者CPU intensive tasks,应放在基于 electron-remote 创建的 separate process 里面。参考:Deep dive into Electron’s main and renderer processes
  • 可以用 CommandOrControl+Shift+I+O+P 打开开发工具,在 production 环境中也可以使用

注意事项

  1. 通过Global Event Bus this.$bus 发出指令,例如 play、pause
  2. VideoCanvas 收到 event 之后,调用 DOM 的 function 控制 video 对象
  3. video 对象的事件会绑定至 VideoCanvas 的 methods
  4. 消息中的状态数据通过 vuex commit 至 this.$store
  5. 其他各 vue components 根据 data store 的数据状态更新表现层
  • video-controller 之下的 child components 需要响应 click 事件时注意使用 v-on:click.capture.stop 以保证先于 video-controller 触发点击事件并避免事件穿透
  • 代码引用文件时使用 ~@/ 代表代码根目录,例如 src="~@/assets/"
  • 字体文件放在fonts目录下,css|scss文件放在css目录下
  • 使用 vue-i18n 做多语言支持
  • 优先使用CSS来制作动态效果

Branching Model

Build

# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron application for production
npm run build

# run unit test
npm run unit

# lint all JS/Vue component files in `src/`
npm run lint

Publish

in .travis.yml

Maintainance Cheetsheet

clear up AppVeyor Cache

export APPVEYOR_TOKEN="<your-api-token>"
curl -H "Authorization: Bearer $APPVEYOR_TOKEN" -H "Content-Type: application/json" -X "DELETE" \ https://ci.appveyor.com/api/projects/tomasen/splayerx-susim/buildcache

This project was generated with electron-vue@7c4e3e9 using vue-cli. Documentation about the original structure can be found here.

Packages

No packages published

Languages

  • Vue 46.0%
  • TypeScript 31.3%
  • JavaScript 20.4%
  • SCSS 1.8%
  • HTML 0.2%
  • EJS 0.1%
  • Other 0.2%