近期在学习【时间管理】方面的课程，其中有一期讲了蕃茄工作法，发现是个好多东西。蕃茄工作法核心思想就是：工作25分钟，休息5分钟。如果您好了解更多可以自行度娘。 在加上本人是一个程序猿，就想用程序的方式来表达对此工作法的敬意。因此就产生了用vue实现一个tomato timer的想法。 [img]http://files.jb51.net/file_images/article/201707/2017072408145611.gif[/img] [b]一、vue如何实现他的[/b] [b]1. 依赖的包[/b] 打包工具没有用流行的webpack，而是rollup，因为他有shaking tree技术。 ui用的是iview，mvvm当然是我熟悉而喜爱的vue了。 [b]2. 项目结构[/b] [img]http://files.jb51.net/file_images/article/201707/20170724081833.jpg[/img] [b]说明：[/b] aloneIndex.js和Index.js都是此模块的入口，index.js是用于对接本人实现的vueManager中后端管理平台，而aloneIndex.js则是让tomato timer能单独运行。 本项目实现了数据与视图的解藕，也就是.vue文件中不在直接操作store（存储层），而是调用service层提供的方法来进行中转。 [b]3. 实现中遇到的坑[/b] rollup对lodash的shaking tree无效 [b]解决办法：[/b] 安装：babel-plugin-lodash（将模块的commonJs规范转换为es6规范）、babel-preset-latest [b].babelrc配置文件修改：[/b] babel提示lodash打包超过500kb的问题 只需要在.bablerc中加入compact:true节点即可。 独立打包后，运行是提示'process is undefine'的问题 安装rollup-plugin-replace即可。 以上这篇vue 实现 tomato timer(蕃茄钟)实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。