vue 實現(xiàn) tomato timer(蕃茄鐘)實例講解
近期在學習【時間管理】方面的課程，其中有一期講了蕃茄工作法，發(fā)現(xiàn)是個好多東西。蕃茄工作法核心思想就是：工作25分鐘，休息5分鐘。如果您好了解更多可以自行度娘。 在加上本人是一個程序猿，就想用程序的方式來表達對此工作法的敬意。因此就產(chǎn)生了用vue實現(xiàn)一個tomato timer的想法。
一、vue如何實現(xiàn)他的
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是用于對接本人實現(xiàn)的vueManager中后端管理平臺，而aloneIndex.js則是讓tomato timer能單獨運行。
本項目實現(xiàn)了數(shù)據(jù)與視圖的解藕，也就是.vue文件中不在直接操作store（存儲層），而是調用service層提供的方法來進行中轉。
3. 實現(xiàn)中遇到的坑
rollup對lodash的shaking tree無效
解決辦法：
安裝：babel-plugin-lodash（將模塊的commonJs規(guī)范轉換為es6規(guī)范）、babel-preset-latest
.babelrc配置文件修改：
{
"presets": [["latest",{
"es2015":{
"modules":false
}
}]],
"plugins": ["lodash"],
"compact": true //處理max 500kb的問題
}
babel提示lodash打包超過500kb的問題
只需要在.bablerc中加入compact:true節(jié)點即可。
獨立打包后，運行是提示'process is undefine'的問題
安裝rollup-plugin-replace即可。
以上這篇vue 實現(xiàn) tomato timer(蕃茄鐘)實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于axios如何取消重復無用的請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用axios具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
Vue3?實現(xiàn)網(wǎng)頁背景水印功能的示例代碼
這篇文章主要介紹了Vue3?實現(xiàn)網(wǎng)頁背景水印功能,這里水印的字體大小、顏色和排布參考了企業(yè)微信的背景水印，使得看起來不那么突兀，需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇Vue刷新修改頁面中數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
導航守衛(wèi)就是路由跳轉過程中的一些鉤子函數(shù)，這個過程中觸發(fā)的這些函數(shù)能讓你有操作一些其他的事兒的時機，這就是導航守衛(wèi)，守衛(wèi)適用于切面編程，即把一件事切成好幾塊，然后分給不同的人去完成，提高工作效率，也可以讓代碼變得更加優(yōu)雅2022-09-09
這篇文章主要介紹了Vue頭像處理方案，實現(xiàn)思路主要是通過獲取后臺返回頭像url，判斷圖片寬度，高度。具體實例代碼大家參考下本文2018-07-07
這篇文章主要介紹了Vue滾動頁面到指定位置的實現(xiàn)及避坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-router 按需加載 component: () => import() 報錯的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue高級特性的相關知識，文中介紹非常細致，幫助大家更好的參考和學習，感興趣的朋友可以了解下2020-06-06
vue使用vue-video-player無法播放本地視頻的問題及解決
這篇文章主要介紹了vue使用vue-video-player無法播放本地視頻的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家分享了一款MVVM組件，構建自己的Vue組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03