专栏首页cnblogsvue 实现 tomato timer(蕃茄钟)

vue 实现 tomato timer(蕃茄钟)

近期在学习【时间管理】方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西。蕃茄工作法核心思想就是:工作25分钟,休息5分钟。如果您好了解更多可以自行度娘。 在加上本人是一个程序猿,就想用程序的方式来表达对此工作法的敬意。因此就产生了用vue实现一个tomato timer的想法。演示地址

一、vue如何实现他的

1. 依赖的包

"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"
  }
  1. 打包工具没有用流行的webpack,而是rollup,因为他有shaking tree技术。
  2. ui用的是iview,mvvm当然是我熟悉而喜爱的vue了。

2. 项目结构

说明:

  1. aloneIndex.js和Index.js都是此模块的入口,index.js是用于对接本人实现的vueManager中后端管理平台,而aloneIndex.js则是让tomato timer能单独运行。
  2. 本项目实现了数据与视图的解藕,也就是.vue文件中不在直接操作store(存储层),而是调用service层提供的方法来进行中转。

3. 实现中遇到的坑

  1. rollup对lodash的shaking tree无效 解决办法:
    1. 安装:babel-plugin-lodash(将模块的commonJs规范转换为es6规范)、babel-preset-latest
    2. .babelrc配置文件修改:
{
    "presets": [["latest",{
        "es2015":{
            "modules":false
        }
    }]],
    "plugins": ["lodash"],
    "compact": true //处理max 500kb的问题
}
  1. babel提示lodash打包超过500kb的问题 只需要在.bablerc中加入compact:true节点即可。
  2. 独立打包后,运行是提示'process is undefine'的问题 安装rollup-plugin-replace即可。

二、最后的申明

如果发现此工具能提高您的工作效率,请大胆的使用。如果您发现Bug,请反馈于我,我们将成为朋友。我也会尽力打造好tomato timer这个小工具。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue、rollup、sass、requirejs组成的vueManager

    近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择...

    sam dragon
  • cordova环境搭建

    说明:gradle下载后,解压到硬盘某个目录即可;安装步骤:java->node->adb-studio

    sam dragon
  • async 和 await 之异步编程的学习

          async修改一个方法,表示其为异步方法。而await表示等待一个异步任务的执行。js方面,在es7中开始得以支持;而.net在c#5.0开始支持。...

    sam dragon
  • [JVM 相关] Java 新型垃圾回收器(Garbage First,G1)

    2种过程是循环往复收集。 G1指令细节 初始空间占用 Initiating Heap Occupancy Percent(IHOP): Initi...

    Isaac Zhang
  • AI一分钟 | 阿里联合蚂蚁金服95亿美元收购饿了么;西湖大学正式获批成立

    整理 | 明明 一分钟AI 突破雾障,MIT 研究人员解决无人驾驶汽车一大难题 阿里巴巴联合蚂蚁金服,95亿美元全资收购饿了么 医疗 AI 团队 Airdoc...

    AI科技大本营
  • 【资讯】七夕特辑,网恋比较靠谱吗?

    曾被家长批判的一无是处的“网恋”终于扬眉吐气了。明天就是白色情人节了,小编整理出一张关于网恋的大数据信息图,数据显示,无论是速度上(从相识到结婚)、还是效率上(...

    小莹莹
  • RadRails1.0降临——增加Profiler、CallGraph Analyzer和Rails Shell等新特性

    作者 Werner Schuster译者 李明(nasi) 作为Aptana IDE的一部分,RadRails目前已经发布了1.0版本。作为一直以来流行的Ra...

    用户1172164
  • Hbase 学习(六) 配置文件调优

    这部分的内容,网上多了去了,都大同小异的,仅作为备忘录,省得需要的时候又要到处查。 1.zookeeper.session.timeout 默认3分钟,...

    岑玉海
  • 基于直方图的图像增强算法(HE、CLAHE、Retinex)之(一)

    http://blog.csdn.net/baimafujinji/article/details/50614332

    bear_fish
  • 基于Django的电子商务网站开发(连载35)

    顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscr...

    小老鼠

扫码关注云+社区

领取腾讯云代金券