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"}
- 打包工具没有用流行的webpack,而是rollup,因为他有shaking tree技术。
- ui用的是iview,mvvm当然是我熟悉而喜爱的vue了。
2. 项目结构
说明:
- aloneIndex.js和Index.js都是此模块的入口,index.js是用于对接本人实现的vueManager中后端管理平台,而aloneIndex.js则是让tomato timer能单独运行。
- 本项目实现了数据与视图的解藕,也就是.vue文件中不在直接操作store(存储层),而是调用service层提供的方法来进行中转。
3. 实现中遇到的坑
- rollup对lodash的shaking tree无效
解决办法:- 安装:babel-plugin-lodash(将模块的commonJs规范转换为es6规范)、babel-preset-latest
- .babelrc配置文件修改:
{"presets": [["latest",{"es2015":{"modules":false}}]],"plugins": ["lodash"],"compact": true //处理max 500kb的问题 }
- babel提示lodash打包超过500kb的问题
只需要在.bablerc中加入compact:true节点即可。 - 独立打包后,运行是提示'process is undefine'的问题
安装rollup-plugin-replace即可。
二、最后的申明
如果发现此工具能提高您的工作效率,请大胆的使用。如果您发现Bug,请反馈于我,我们将成为朋友。我也会尽力打造好tomato timer这个小工具。
转载于:https://www.cnblogs.com/cqhaibin/p/7225500.html
vue 实现 tomato timer(蕃茄钟)相关推荐
- 标准蕃茄钟_12月开始设计项目:番茄钟
标准蕃茄钟 by K. Anthony 通过K.安东尼 12月开始设计项目:番茄钟 (December Go Design Something Project: Pomodoro Timer) The ...
- 一百多行 Python 代码手写蕃茄钟
对现实不满,充满无力感,可是作为一个码农,大时代里的一个小人物,并不能改变什么,只能在程序代码里的世界里找点乐趣吧, 东坡先生如是说: 莫听穿林打叶声,何妨吟啸且徐行.竹杖芒鞋轻胜马,谁怕?一蓑烟雨任 ...
- 蕃茄工作法 - 让你轻松应对繁忙的工作
如果下面任何一个情况都发生在你身上,那么建议你继续往小看.否则,请忽略本文. 当你正聚精会神地工作的时候,突然有人过来找你讨论什么事情,你不好意思拒绝.几分钟或10多分钟以后,讨论结束了,你不得不回忆 ...
- 从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法 功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
- 卓训教育:善用“番茄钟法”,让孩子学会管理时间
卓训教育发现,很多孩子在学习中有一种现象,就是他"假装很忙",什么意思呢?比如有个孩子,他每天放学回来就坐那开始学习,一直弄到晚上十一.二点才睡觉,看起来真是很辛苦,可实际上呢,他 ...
- php的环境怎么配置文件,php环境下所有的配置文件以及作用
知方可补不足~UPDLOCK更新锁的使用 回到目录 对于高并发的场合下,使用UPDLOCK可以有效的控制并发更新的问题,即当一个线程在进行with(UPDLOCK)并进行update时,另一个线程将被 ...
- 网络编程 TCP电子网络词库
电子词典: 要求: 登录注册功能,不能重复登录,重复注册.用户信息也存储在数据库中. 单词查询功能 历史记录功能,存储单词,意思,以及查询时间,存储在数据库 基于TCP,支持多客户端连接 采用数据库保 ...
- 电子词典(基于TCP协议多进程通信和数据库)
项目:电子词典 项目要求: 登录注册功能,不能重复登录,重复注册.用户信息也存储在数据库中. 单词查询功能 历史记录功能,存储单词,意思,以及查询时间,存储在数据库 基于TCP,支持多客户端连接 采用 ...
- 写论文必须养成的十大良好写作习惯
很多学者抱怨自己没有时间完成写作,其实只要拥有良好的写作习惯才能让写文章成为手到擒来的事. 1.订定行程表 如果您将写作的时间安排在一天的结尾.等到所有工作都结束后才开始的话,您很有可能永远腾不 ...
- bootstrap 滚动 进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 保存中:{{length}}% PS: ...
最新文章
- R语言基于Boruta进行机器学习特征筛选(Feature Selection)
- linux摄像头 sdl,Linux音视频(SDL与YUV)
- python-3.x-基本数据类型
- 已解决AttributeError set object has no attribute items(亲测)
- 推荐收藏 | SLAM优秀开源工程汇总
- cf1114 D. Flood Fill
- Spring 访问数据库
- 深度学习模型压缩方法
- 【火炉炼AI】深度学习006-移花接木-用Keras迁移学习提升性能
- java抓取网页数据_Python抓取网页数据的终极办法 !
- 央行发布洗钱风险自评估指引 12月31日前更新制度
- 打印 条码 CodeSoft JsBarCode
- 高温差热分析仪(高温热重分析仪)
- Threejs HDR
- Linux下线程经典问题(生产者消费者问题,哲学家问题...)
- 前端学习之路Electron——全局注册、注销快捷键
- java 图形检测_使用OpenCV[Java]检测简单几何图形
- 安装Kubernets管理平台Ratel
- 晚上如何配置ubuntu,保护眼睛?黑(暗)色主题
- 表格的背景图片怎么弄HTML,HTML中新建表格怎么加背景
热门文章
- eclipse下载支持compiler compliance level 1.8的插件
- 分卷压缩的rar,用WinRAR解压比7Zip快
- 浏览器的NPAPI插件技术不要学了,已经淘汰几年了
- 工作中要注意拍照录像,证明工作完成
- 换回了WINDOWS7
- 觉得清楚,跟说清楚写清楚,两回事
- 安卓显示视频画面的动画效果及代码
- java arraylist_Java 集合框架之 ArrayList 源码图示法简要剖析
- oracle 启动 08103,数据库打开遭遇ORA-08103故障处理
- python中pickle模块无法导入_python pickle模块