近期在学习【时间管理】方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西。蕃茄工作法核心思想就是:工作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这个小工具。

vue 实现 tomato timer(蕃茄钟)的更多相关文章

  1. vue 数据管道

    文档https://cn.vuejs.org/v2/guide/filters.html html 片段 <div class="app"> <div>{{ ...

  2. 前端打包成桌面应用、以及chrome扩展

    前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况.上周末对比做了扩展和改进,使其成为chrome的插件, ...

  3. [转载]番茄时间管理法(Pomodoro Technique):一个番茄是如何让你工作更有效率的

    如果你经常读一些关于提高工作效率或时间管理类的博客,一定听说过番茄时间管理法(Pomodoro Technique).这是一种极好的帮助你集中注意力.获得更高工作效率的方法. 基本上,它的实施方法是这 ...

  4. bootstrap得动态进度条

    Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...

  5. 三十分钟学完Vue

    基础知识: vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeDestory/desto ...

  6. vue on-change 如果有循环的timer 则无限自动执行

    <div class="contract-class"> <Checkbox v-model="smallChecked" :on-chang ...

  7. Vue.js 十五分钟入门

    本文经授权转载,仅用于学习,版权归原作者所有. TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很 ...

  8. 一个基于vue的时钟

    前两天写了一个基于vue的小钟表,给大家分享一下. 其中时针和分针使用的是图片,结合transform制作:表盘刻度是通过transform和transformOrigin配合画的:外面的弧形框框,啊 ...

  9. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

随机推荐

  1. 每天一个Linux命令—— WC

    一.首先看一下帮助 Usage: wc [OPTION]... [FILE]...  or:  wc [OPTION]... --files0-from=F Print newline, word, ...

  2. Python中lambda用法

    lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是起到一个函数速写的作用.允 ...

  3. ActionContext、ServletContext、pageContext的区别?

    ActionContext是当前的Action的上下文环境,通过ActionContext可以获取到request.session.ServletContext等与Action有关的对象的引用: Se ...

  4. openjdk8之编译和debug

    系统环境为ubuntu 16.04,uname -a: Linux ddy-Aspire-V5-573G 4.4.0-21-generic #37-Ubuntu SMP Mon Apr 18 18:3 ...

  5. 表单的get和post使用情景

    GET和POST两种方法都是将数据送到服务器,但你该用哪一种呢? HTTP标准包含这两种方法是为了达到不同的目的.POST用于创建资源,资源的内容会被编入HTTP请示的内容中.例如,处理订货表单.在数 ...

  6. angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件

    时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...

  7. 为网页生成二维码(jquery.qrcode.min.js)

    做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...

  8. 单例模式与静态变量在PHP中

    在PHP中,没有普遍意义上的静态变量.与Java.C++不同,PHP中的静态变量的存活周期仅仅是每次PHP的会话周期,所以注定了不会有Java或者C++那种静态变量. 1. 静态变量在PHP中 在PH ...

  9. 搭建es6开发与非开发环境babel-browser

    前言 最近打算把es6应用到项目中,但是如何在开发环境(浏览器端)直接运行es6?es6已经发布一段时间了,现在大部分是在node.js环境运行,或者通过babel编译之后运行.babel-brows ...

  10. 【Android Developers Training】 7. 添加Action Buttons

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...