Chord

基于 TypeScript 环境，使用 Vue2 全家桶制作的和弦练习小工具。供学习参考和小娱乐
在线浏览

基于 Vue3 的重构版本: chord-vue3

intro

使用 vue-cli3 创建项目， 目录结构如下

│  
├─ babel.config.js
├─ package.json
├─ postcss.config.js
├─ README.md
├─ tsconfig.json
├─ vue.config.js
│
├─.github
│  └─workflows
│          main.yml
├─public
│
└─src
    │  App.tsx
    │  main.ts
    │  shims-tsx.d.ts
    │  shims-vue.d.ts
    │
    ├─assets
    ├─components
    ├─const
    ├─router
    ├─store
    ├─style
    ├─utils
    └─views

工具栈

Typescript 支持

vue-class-component, vue-property-decorator, 'vuex-class'

JSX/TSX 支持

vue-tsx-support

konva-vue

基于 canvas 工具库 konva，集成为 vue 组件

Vant 2

基于 Vue 2.0 的 UI 组件库

github workflows

使用 github/Actions 提供的 workflows 功能，此项目用来监听 master 分支的提交，并自动构建部署到 git-page 站点（即 在线浏览 ）
也可以用来进行各种自动化测试

日志

1. 开发进度一览

• 完成keyboard交互 [完成]
• 完成和弦存取体系搭建 [完成大部分]
• 完成mobile和PC适配
• 增加MIDI支持
• 增加guitar交互
• 增加五线谱交互

后续开发目标视情况而定

---

2. 阶段性开发日志

• 2020-06-09 项目初始化，完成keyboard基础交互，和弦体系的搭建进行中
• 2020-06-20 存储保存系统初始化开发
• 2020-06-21 新建和弦的UI
• 2020-06-22 TS重构部分组件; UI和存储结合完毕
• 2020-06-23 UI优化；添加批量编辑和显示答案
• 2020-06-26 添加导入导出所有和弦数据功能
• 2020-06-29 存储系统弃用vue-plugin，改用vuex-store
• 2020-07-01 页面全tsx化改造
• 2020-07-02 tool工具栏UI优化
• 2020-07-05 UI調整優化; 增加排序功能; 增加初始化功能
• 2020-07-10 添加分类属性