vue实现番茄钟_不见蝴蝶不见君。的博客-程序员宅基地_vue 番茄钟

技术标签: Vue  

随笔 - 40  文章 - 0  评论 - 0

vue 实现 tomato timer(蕃茄钟)

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

一、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这个小工具。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gabby____/article/details/82912263

智能推荐

dma_async未定义Linux,1.5. PL08X dma_device_Apple Cook的博客-程序员宅基地

** (Bursts are irrelevant for mem to mem transfers - there are no burst signals)** Details of each tranfer on a particular channel* are held in the DMA channel array* A workqueue uses those details to...

UIUC CS241 系统编程中文讲义校对活动 | ApacheCN_cheqieshi4150的博客-程序员宅基地

整体进度:https://github.com/apachecn/uiuc-cs241-notes-zh/issues/1贡献指南:https://github.com/apachecn/uiuc-cs241-notes-zh/blob/master/CONTRIBUTING.md项目仓库...

微信生成收款码_饭酱的博客-程序员宅基地_微信收款码api

<!-- https://mvnrepository.com/artifact/org.jdom/jdom --> <dependency> <groupId>org.jdom</groupId> <artifactId>jdom</artifactId> <version>1.1</version> &l..

Oracle监听无法启动处理随记_文风的博客-程序员宅基地

早上上班,启动工作电脑,按照习惯,手动启动Oracle数据库,启动监听,数据库是起来了,但是启动监听的时候报如下错误:SQL> host lsnrctl startLSNRCTL for 64-bit Windows: Version 12.1.0.1.0 - Production on 27-APR-2016 09:04:09Copyright (c) 1991, 2013, Oracle.

win7下安装mysql 64位安装版_cc20150126的博客-程序员宅基地

网址:http://dev.mysql.com/downloads/file.php?id=454046如下图所示:

Facebook或面临2000000000000美元罚款,扎克伯格认错_程序员大咖的博客-程序员宅基地

点击上方“程序员大咖”,选择“置顶公众号”关键时刻,第一时间送达!当地时间星期三,Facebook CEO 马克·扎克伯格(Mark Zuckerberg)终于打破了在剑桥分析公司数据泄露丑闻上的沉默。最近数天,Facebook 饱受这一丑闻困扰,股价出现大跌。马克表示 Facebook 正在积极采取措施确保不会再发生类似数据滥用事件。并表示将调查所有能获取大量 Facebook 用户数据的应用程

随便推点

python3怎么使用pyrex_Python3+cgroupspy安装使用教程_weixin_39533896的博客-程序员宅基地

一、系统资源使用限制的必要性探讨对于一个脚本,最基础的限制是要限制单进程实例以保证了不会存在多个进程实例、在运行程序主体逻辑前检测系统资源剩余量确保自己不是压夸系统的最后一根稻草、设置程序运行超时时间以保证进程实例不会无休止地运行下去。进一步,在部署有可用性要求较高的服务的主机中,我们还需要关注脚本运行期间占用的系统资源的问题,我们需要一种途径限制脚本对cpu、内存、io等系统资源的用量,以防止脚...

canvas制作烟花效果_spring-boot的博客-程序员宅基地

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5伪元素</title> <style type="text/

客户需求不断变化造成的项目周期的增长的问题_抬头望远,低头沉思的博客-程序员宅基地

       最近一直忙着客户的升级和维护,前段时间还开玩笑说自己现在不是开发了,变成了实施和服务人员了;       问题根本还是在系统交付给客户之后,客户又提出这样那样的问题,我们已经尽力在避免这方面的修改, 但是有的要求也只是我们一厢情愿罢了,客户不答应。这样不可以避免的就造成了项目周期的加长,而且不断的修改造成了系统的不稳定 (之间就发生了一次,由于客户要求比较急,

string的find函数返回值和string::npos_ShenHang_的博客-程序员宅基地_string find函数返回值

先看一种很多人日常使用错误方式string str(“hello world”);int pos=str.find_first_of(“h”);if(pos!=string::npos) // 或者 if(pos!=-1){……// 查找到了} //不存在是find返回-1这样的使用,结果是正常的,但并没有很好的理解string find函数的返回类型和string::npos真正的值。string::find这类型的函数,返回值类型都是string::size_type, 而string

gTest基本知识_tianzhiyi1989sq的博客-程序员宅基地

GoogleTest1. gTest简介gTest是google开发团队开发的一款针对C++代码的测试框架,可以帮助我们更快,更好地写出C++测试代码。gTest支持Linux,Windows,Mac等多个OS平台上运行gTest不仅仅只支持单元测试,还支持其他多种类型的测试。2. 好的测试代码具有哪些特点测试应该是独立且可重复的测试应该能被很好的组织且能清晰的反映测试代码的结...

java 显示玩家分得的一手牌_Java实现扑克牌比大小 (项目分析&代码呈现)_Axaxaxc的博客-程序员宅基地

一、项目介绍该项目的主要功能是实现扑克牌比大小,输入参与游戏的人数,各自选择相应的操作,有看牌、弃牌、下注等等,每一回合有相应的底注,结束时得出获胜玩家,并结算各个玩家剩余的金币总数。二、项目框架与目的开发流程目的:希望同学们在写项目的同时,对不同类之间的数据交互的过程中,更加深刻地掌握Java中类与对象的应用,同时去学习一个项目从无到有的实现过程,以及过程中出现的bug的调试技巧。三、具体实现1...

推荐文章

热门文章

相关标签