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(蕃茄钟)实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 实现 tomato timer(蕃茄钟)实例讲解

    vue 实现 tomato timer(蕃茄钟)实例讲解

    近期在学习[时间管理]方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西.蕃茄工作法核心思想就是:工作25分钟,休息5分钟.如果您好了解更多可以自行度娘. 在加上本人是一个程序猿,就想用程序的方式来表达对此工作法的敬意.因此就产生了用vue实现一个tomato timer的想法. 一.vue如何实现他的 1. 依赖的包 "devDependencies": { "babel-plugin-lodash": "^3.2.11", "b

  • vue组件初学_弹射小球(实例讲解)

    1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 } 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向: isYtrue为true则小球为纵坐标正方向 3

  • vue项目中使用ueditor的实例讲解

    以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="

  • vue进行post和get请求实例讲解

    vue进行post和get请求实例讲解

    目录 一.基本使用方法 1.get请求 2.Post请求 使用axios: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 一.基本使用方法 1.get请求 // Make a request for a user with a given ID axios.get('/user?ID=12345')  .then(function (response) {   console.

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue中进行微博分享的实例讲解

    1.首先要在页面写出点击可进行微博分享的入口,样式因自己项目而定: <li class="bottomIcon_5 shareSina"><a href="javascript:;" rel="external nofollow" target="_blank"></a><div class="shareTxt">微博</div></li&g

  • vue 实现边输入边搜索功能的实例讲解

    效果图: 搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求,否则不请求 search.vue <template> <div id="search"> <input type="text" class="search" plac

  • 基于vue.js路由参数的实例讲解——简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

  • 基于Vue过渡状态实例讲解

    前面的话 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢?包括数字和运算.颜色的显示.SVG 节点的位置.元素的大小和其他的属性等.所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态 状态动画 通过watcher,能监听到任何数值属性的数值更新 <div id="animated-number-demo"> <input v-

  • vue引入jq插件的实例讲解

    vue引入jq插件的实例讲解

    今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个加全,比如unslider插件,(function(){})(window.jQuery) { jQuery: "jquery", "window.jQuery": "jquery&qu

随机推荐