vue 实现 tomato timer(蕃茄钟)实例讲解
更新时间：2017年07月24日 08:16:29 投稿：jingxian
下面小编就为大家带来一篇vue 实现 tomato timer(蕃茄钟)实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
近期在学习【时间管理】方面的课程，其中有一期讲了蕃茄工作法，发现是个好多东西。蕃茄工作法核心思想就是：工作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(蕃茄钟)实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在本教程中，我们将探讨如何在浏览器中使用 JavaScript 库来操作图片，为服务器上的存储做准备，并在 Web 程序中使用。我们将使用 Vue.js 而不是原生 JavaScript来完成此操作,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了Vue filter介绍及其使用详解，VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了Vue实现简单选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue3表单输入绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本文主要介绍了Vue+SpringBoot实现支付宝沙箱支付的示例代码，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型,这篇文章主要给大家介绍了关于Echarts+VUE柱状图绘制细节并且屏幕自适应的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue实现商品飞入购物车效果(电商项目)，这种效果在一些电商平台经常会用到，今天小编通过代码详解,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue项目动态渲染input,绑定的参数不实时更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue项目实现背景颜色以及下划线从左到右渐变动画效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论