vue 实现 tomato timer(蕃茄钟)
时间:2022-04-22
本文章向大家介绍vue 实现 tomato timer(蕃茄钟),主要内容包括一、vue如何实现他的、2. 项目结构、3. 实现中遇到的坑、二、最后的申明、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
近期在学习【时间管理】方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西。蕃茄工作法核心思想就是:工作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这个小工具。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何交互可视化 Roam Research 局部笔记网络?
- Spark Kubernetes 的源码分析系列 - features
- Spark Kubernetes 的源码分析系列 - scheduler
- 简易Ramdisk 镜像制作(基于Centos7+)
- 在 K8S 部署一个 Spark History Server - 篇1
- R语言入门之非参数假设检验
- 在 K8S 部署一个 Spark History Server - 篇2
- UEFI/LEGACY 可启动ISO制作
- Kerberized HDFS with Kubernetes
- 经典 | Python实例小挑战—Part nine
- Mac CPU 相关
- 经典 | Python实例小挑战—Part ten
- 查看 Linux CPU 信息
- 方差分析(ANOVA)
- ps 究竟是 aux 还是 ef