记一个Vue项目的开发历程

项目地址 https://github.com/hongchh/timeline-x

一、成品展示

二、项目需求

• 添加每一天的时间记录，修改某天的时间记录（因为可能记错或者忘了记某项活动）
• 每天的记录可以有多项活动，每项活动有对应的时间
• 每项活动划分到特定的类型

2016-01-20，星期五
1. 学习Vue, 5h，[学习]
2. 跑步，0.5h，[运动]
3. 看霹雳布袋戏，2h，[休闲]

2、数据分析

• 按照月份统计每天的总时间，按照年份统计每月的总时间，按照分类统计各项内容的总时间
• 以图表形式展示月份时间支出和年份时间支出的变化情况
• 以图表形式展示各种类型的活动的时间支出情况
• 计算总时间和平均时间

3、时光展示

• 时光轴形式进行活动记录展示，便于回顾总结
• 轮播图形式进行活动记录展示，便于回顾总结

4、数据模型

{
  "items": [{
    "content": "string",
    "time": "number",
    "type": "string"
  }],
  "year": "number",
  "month": "number",
  "date": "number",
  "day": "number"
}

数据示例

{
  "items": [{
    "content": "学习Vue",
    "time": "5",
    "type": "学习"
  }, {
    "content": "跑步",
    "time": "0.5",
    "type": "运动"
  }, {
    "content": "看霹雳布袋戏",
    "time": "2",
    "type": "休闲"
  }],
  "year": "2016",
  "month": "01",
  "date": "20",
  "day": "5"