vue 实现 tomato timer(蕃茄钟)实例讲解
2017-07-24 08:16
615 查看
近期在学习【时间管理】方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西。蕃茄工作法核心思想就是:工作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即可。
以上这篇vue 实现 tomato timer(蕃茄钟)实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章推荐
- vue 实现 tomato timer(蕃茄钟)
- vue 实现边输入边搜索功能的实例讲解
- VUE利用vuex模拟实现新闻点赞功能实例
- 图文讲解基于centos虚拟机的Hadoop集群安装,并且使用Mahout实现贝叶斯分类实例 (3)
- vue-自定义组件传值的实例讲解
- 实例讲解hadoop中的map/reduce查询(python语言实现)
- 实例讲解hadoop中的map/reduce查询(python语言实现)
- iOS开发中实现一个简单的图片浏览器的实例讲解
- Linux管理工作,实例讲解工作中使用ssh证书登录的实际流程,讲解ssh证书登录的配置原理,基于配置原理,解决实际工作中,windows下使用SecureCRT证书登录的各种问题,以及实现hadoo
- Spring整合多数据源实现动态切换的实例讲解
- JQuery实现可编辑的表格实例讲解(2)
- 网络爬虫讲解(附java实现的实例)
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- Lucene实现索引和查询的实例讲解
- 使用bitset实现毫秒级查询(实例讲解)
- 使用vue实现grid-layout功能实例代码
- Vue.js实现拖放效果的实例
- 在knockoutjs 上自己实现的flux(实例讲解)
- Queue 实现生产者消费者模型(实例讲解)
- Vue 多层组件嵌套二种实现方式(测试实例)