亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解

 更新時(shí)間：2017年07月24日 08:16:29   投稿：jingxian  
下面小編就為大家?guī)硪黄獀ue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

近期在學(xué)習(xí)【時(shí)間管理】方面的課程，其中有一期講了蕃茄工作法，發(fā)現(xiàn)是個(gè)好多東西。蕃茄工作法核心思想就是：工作25分鐘，休息5分鐘。如果您好了解更多可以自行度娘。 在加上本人是一個(gè)程序猿，就想用程序的方式來表達(dá)對(duì)此工作法的敬意。因此就產(chǎn)生了用vue實(shí)現(xiàn)一個(gè)tomato timer的想法。

image

一、vue如何實(shí)現(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，因?yàn)樗衧haking tree技術(shù)。

ui用的是iview，mvvm當(dāng)然是我熟悉而喜愛的vue了。

2. 項(xiàng)目結(jié)構(gòu)

說明：

aloneIndex.js和Index.js都是此模塊的入口，index.js是用于對(duì)接本人實(shí)現(xiàn)的vueManager中后端管理平臺(tái)，而aloneIndex.js則是讓tomato timer能單獨(dú)運(yùn)行。

本項(xiàng)目實(shí)現(xiàn)了數(shù)據(jù)與視圖的解藕，也就是.vue文件中不在直接操作store（存儲(chǔ)層），而是調(diào)用service層提供的方法來進(jìn)行中轉(zhuǎn)。

3. 實(shí)現(xiàn)中遇到的坑

rollup對(duì)lodash的shaking tree無效

解決辦法：

安裝：babel-plugin-lodash（將模塊的commonJs規(guī)范轉(zhuǎn)換為es6規(guī)范）、babel-preset-latest

.babelrc配置文件修改：

{
 "presets": [["latest",{
  "es2015":{
   "modules":false
  }
 }]],
 "plugins": ["lodash"],
 "compact": true //處理max 500kb的問題
}

babel提示lodash打包超過500kb的問題

只需要在.bablerc中加入compact:true節(jié)點(diǎn)即可。

獨(dú)立打包后，運(yùn)行是提示'process is undefine'的問題

安裝rollup-plugin-replace即可。

以上這篇vue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論