做程序开发人员，合理安排时间非常重要。番茄工作法因为容易操作而且效果显著，很受大家欢迎。我上时间管理课的时候了解到这个方法，就决定用 Vue 来做一个计时器，以此表达对它的敬意，现在就给大家讲讲制作过程。

依赖的包

制作这个计时器时，我挑选了某些特殊的辅助程序。构建过程没有采用常见的打包方案，而是采用了具备 tree 功能的工具。界面部分，我使用了 iview，它能够提供既好看又好用的界面元素。对于 MVVM 框架，我自然选择了熟悉且喜欢的 Vue，它让数据关联和界面刷新变得简单，显著提升了工作速度，让我可以更集中精力在功能开发上。

"devDependencies": {
 "babel-plugin-lodash": "^3.2.11",
 "babel-preset-es2015-rollup": "^3.0.0",
 "babel-preset-latest": "^6.24.1",
 "rollup": "^0.41.6",
 "rollup-plugin-babel": "^2.7.1",
 "rollup-plugin-commonjs": "^8.0.2",
 "rollup-plugin-node-resolve": "^3.0.0",
 "rollup-plugin-replace": "^1.1.1",
 "rollup-plugin-vue": "^2.4.0"
 },
 "dependencies": {
 "iview": "^2.0.0-rc.19",
 "lodash": "^4.17.4",
 "vue": "^2.4.1",
 "vuex": "^2.3.1"
 }

项目结构

项目的构造规划很有必要，.js 与 Index.js 均为模块的起始点，index.js 用来连接我开发的中后端管理框架，而.js 则使 Timer 能独立运作，此外，这个项目达成了数据层面和视图层面的分离。在.vue 文件里，不再直接操作 store，而是借助层提供的方法进行中转，这样做，代码的可维护性和可扩展性都明显提升，后续修改功能也更便捷。

实现中遇到的坑

开发期间并非毫无阻碍，遇到了许多困难。起初 tree 参数无效，让我感到十分困惑。经过一番探索，终于找到了应对方法。需要先安装 babel（用于转换模块规范为 es6 规范）等辅助工具，同时对相关设置文档进行适当调整。随后又遇到了 babel 报错提示打包体积超过 500kb 的情况，在配置文档里加入特定标记即可消除该警告。单独解压后启动时又出现关于 'is' 的错误，配置所需组件后便解决了。

番茄工作法的优势

番茄工作法的主要特点是每工作 25 分钟就休息 5 分钟，这种模式能够帮助提升工作成效。连续紧张工作 25 分钟之后，进行短暂的放松可以让大脑得到喘息，从而以更佳的状态开始下一阶段的工作。以我写程序为例，采用这种方法可以维持高度的集中力，降低出错率，并且加快任务完成的进程。

代码的优化与改进

现在虽然基础功能已经完成，但程序依然存在改进空间。能够增设更多个性化设置，使用户自主设定工作与休息的时段。此外，也可以加入警示环节，在工作和休息时段交替时提供更清晰的信号，以此提升使用感受。

未来的拓展方向

往后，这个计时器能够跟许多软件对接。譬如，同日程安排工具配合，依据日程自动规划专注时段。还能增设社交特性，让用户跟伙伴们一起运用，彼此督促，增强做事的主动性。

{
 "presets": [["latest",{
  "es2015":{
   "modules":false
  }
 }]],
 "plugins": ["lodash"],
 "compact": true //处理max 500kb的问题
}

有人在运用番茄时间管理法或者从事同类工作期间，碰到过哪些有意思的难题？可以到留言区谈谈。如果觉得这篇文章挺有价值的，别忘了点个赞再转发一下。

相关热词