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 相关文章推荐
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
Javascript基础教程之变量
Jan 18 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
一起来了解一下JavaScript的预编译(小结)
Mar 01 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
jQuery示例收集
2010/11/05 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Python 高效编程技巧分享
2020/09/10 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
《纸船和风筝》教学反思
2014/02/15 职场文书
毕业生面试求职信
2014/06/23 职场文书
中国梦团日活动总结
2014/07/07 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
垂直极限观后感
2015/06/08 职场文书
超市员工管理制度
2015/08/06 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python