资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vue实现tomatotimer(蕃茄钟)实例讲解

近期在学习【时间管理】方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西。蕃茄工作法核心思想就是:工作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(蕃茄钟)实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


文章题目:vue实现tomatotimer(蕃茄钟)实例讲解
当前网址:http://cdkjz.cn/article/ipcdcc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220