vue1 0公升級2 0實戰

最近手裡有個大活，乙個維護了三年的vue1.0專案，要公升級到2.0，頭疼了半個月終於是公升上去了，接下來做個記錄，記錄下公升級思路。

一、公升級有四個大難點，n個小難點：

1、記住公升級不要急，剛開始幾天頁面空白都是正常的，有報錯就好，最怕效果不出還不報錯，公升級第一步:

"vue" :"2.6.10" ,"vue-loader" :"12.0.0" ,"vue-router" :"^3.1.0"

,

先公升級這三個，vuex2.0以上相容1.0的所以暫時不著急公升級，頁面顯示出來後再公升級，這三個版本號親測不衝突，裝完新的依賴後頁面會一片空白，控制台一直標紅，這個時候莫慌，現在報錯的主要原因是，vue-router的語法有了很大的變化和vue的語法變化所導致的，你可以淡定的開啟vue 官方遷移文件找遷移工具 vue-migration-helper 幫你檢測vue的語法變化，同時也告訴你怎麼改，當然這個只能檢測元件內部語法，建議從登陸頁開始，先看到頁面心裡有點底再說。

2、看到登陸頁面並且能登入後，咱們就先停一哈，還要吧vuex搞上去，這樣vue主架構就公升級完成了，vuex不多說看**，語法變了思想沒變：

vuex1.0的action：

import
*as types from
'../types'
;import
from
'@facade'
;export
const
fetchsummary=(
)=>);
};export
const
fetchattacksummary=(
, callback)
=>})
;}

vuex3.0的action

import
*as types from
'../types'
;import
from
'@facade'
;const actions =
, querycondition));
},setqueryparameter
(, querycondition));
},clearalarmquerycondition()
);},
setwindow
(, wh)
else
},

vuex1.0的getters

export
const
getsummary=(
)=>
export
const
getattacktotal=(
)=>
export
const
getthreattotal=(
)=>
export
const
getthreatsummary=(
)=>

vuex3.0的getters

const getters =
,getattacktotal
(state)
,getthreattotal
(state)
,getthreatsummary
(state)
,getassettotal
(state)
,getkeyassetnum
(state)
,

mutations和state變化不大。

頁面引用變化：

vuex1.0

import
from
'@/store/getters/sa-getters'
;//四個語法類似
export
default
},

vuex3.0：

import
from
'vuex'
; computed:)}
, methods:

以上就是vuex的變化。

3、webpack1.0公升級3.0有時間在寫，我要下班了。。。

vue1 0公升級2 0實戰

vue專案1 0公升級2 0總結

vue1 0和vue2 0的區別一

Polymer 1 0 公升級指南

vue1 0公升級2 0實戰

vue專案1 0公升級2 0總結

vue1 0和vue2 0的區別 一

Polymer 1 0 公升級指南

相關推薦

vue1 0和vue2 0的區別一