vue 实现 tomato timer(蕃茄钟)实例讲解


Posted in Javascript onJuly 24, 2017

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

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. 项目结构

vue 实现 tomato timer(蕃茄钟)实例讲解

说明:

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即可。

以上这篇vue 实现 tomato timer(蕃茄钟)实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
php register_shutdown_function函数详解
Jul 23 #Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 #Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 #Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
基于Vue.js实现tab滑块效果
Jul 23 #Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Python中字符串与编码示例代码
2019/05/20 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
社团活动策划书范文
2014/01/09 职场文书
优秀小学生家长评语
2014/01/30 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技