当前位置: 首页 > Web前端 > vue.js

纯手工vue2升级vue3

时间:2023-04-01 12:12:08 vue.js

涓€鍒囬兘鏄紭鍒嗭紝璋佷篃涓嶈惤涓嬨€備織璇濊锛屽崄浜斿勾涓轰竴骞淬€傚湪杩欓噷绁濇墍鏈夐槄璇昏繖绡囨枃绔犵殑浜烘柊骞村揩涔愩€傜澶у鏂板勾蹇箰銆傚湪杩欎釜杈炴棫杩庢柊鐨勬棩瀛愰噷锛屾垜emo銆傝繖涓嶆槸涓€浠剁壒鍒棝鑻︾殑浜嬫儏銆傝鎴戜滑绠€鍗曟弿杩颁竴涓嬩簨鎯呯殑缁忚繃銆傚幓骞村勾涓紝鐢变簬椤圭洰闇€瑕侊紝鎴戦渶瑕佸拰鈥滄湅鍙嬧€濋儴闂ㄥ叡鍚屽紑鍙戜竴涓」鐩€傛湰閮ㄩ棬棰嗗娌熼€氾紝瑕佹眰瀵规柟鎻愪緵鎶€鏈爤鍜屼唬鐮佽鑼冦€傜粨鏋溾€︹€︽垜浠敤鐨勬槸vue2锛屼粬浠敤鐨勬槸vue3銆傝繖涓庢垜鏃犲叧銆傜涓€澶╀笂鐝悗锛屼粬浠鎴戜滑鎶婅嚜宸辩殑浠g爜闆嗘垚鍒板埆浜虹殑椤圭洰涓€傝繖涓笉鐭ラ亾涓轰粈涔堟伓蹇冪殑闂灏辫惤鍦ㄤ簡鎴戠殑澶翠笂銆傛垜鍙煡閬撻偅澶╂櫄涓婁粬浠紑浜嗕竴涓緢闀跨殑浼氥€傚紑浼氬墠锛屾垜缁欏嚭浜嗕互涓嬪嚑濂楄В鍐虫柟妗堬細浣跨敤寰墠绔繘琛岃繛鎺ワ紱鎺ㄧ炕涔嬪墠鐨勯」鐩紝閲嶆柊缂栧啓浠g爜缁撴瀯锛涚函鎵嬪伐锛屽己鍒惰縼绉伙紝淇敼涓嶅尮閰嶇殑閮ㄥ垎锛涙渶鍚庡拰鑰佹澘鍟嗛噺鍚庯紝鏈€缁堥€夋嫨浜嗙涓夌鏂规锛屾垜鏄痚mo锛佹潵鍚э紒鐪嬬湅鎴戜滑鍦ㄨ繖涓函鎵嬪伐鍗囩骇鐨勮繃绋嬩腑閬囧埌浜嗗摢浜涢棶棰樺惂锛佸姩鎬佽幏鍙栧け璐ュ彲鑳芥湁浠ヤ笅鍘熷洜锛氬湪璺敱閰嶇疆璺緞涓婃壘涓嶅埌瀵瑰簲鐨勬枃浠讹紱鍦ㄦ枃浠朵腑鐨勫鍏ヨ矾寰勪笂鎵句笉鍒板搴旂殑鏂囦欢锛?instanceof'鐨勫彸渚т笉鏄璞¤繖涓棶棰樺彂鐢熷湪鎴戣縼绉诲叕鍏辩粍浠跺拰瀛愮粍浠舵椂銆傚師鍥犳槸鍦ㄦ帴鏀剁埗缁勪欢鐨刾rops鏃讹紝瀹氫箟鐨則s绫诲瀷涓嶆槸鍗曚竴绫诲瀷锛沺rops:{//鍧弉eedToTop:{type:Boolean|null,default:true}//濂絥eedToTop:{type:Boolean,default:true}}鏂版鏋朵笉鏀寔vueJsx@vitejs/plugin-vue-jsx鏄疺ite瀹樻柟鎻愪緵鐨凧SX鏀寔鎻掍欢锛屽唴閮ㄤ娇鐢ˊvue瀹樻柟鎻愪緵鐨刅ue/babel-plugin-jsx鎻掍欢銆倂itejs.dev鐨勯厤缃甶mport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),vueJsx()],})娉ㄦ剰锛氬畨瑁呮椂娉ㄦ剰褰撳墠@vitejs/plugin-vue-jsx鍜寁ite鐨勭増鏈尮閰嶃€俫host鍑芥暟鏄洰鍓嶉亣鍒扮殑鏈€濂囪懇鐨勯棶棰樸€傛垜灏佽浜嗕竴涓熀浜巈lement-plus鐨勪笂浼犵粍浠躲€備富瑕佸姛鑳芥槸鑾峰彇浣犱笂浼犲浘鐗囧悗鐨勮繑鍥炲€硷紝鐒跺悗鏆撮湶鍑烘潵銆?/杩欐槸鍦ㄧ埗缁勪欢涓皟鐢ㄧ殑浠g爜锛岃璁颁綇杩欓噷鐨勬垚鍔熷嚱鏁?el-form-itemlabel="Uploadattachment:"prop="fileList"v-if="dialogVisible">handleRemove('fileList',fileList)"@success="(response)=>handleSuccess('fileList',response)">//杩欐槸瀛愮粍浠?el-uploadref="upload":action="imgUrl":list-type="listType"v-model:file-list="files":show-file-list="listType==='picture-card'":on-remove="(_,fileList)=>handleRemove(fileList)":on-success="(response)=>uploadSuccess(response)":on-exceed="handleExceed">constupdateSuccess=锛堝搷搴旓級=>{emit('success',response)}浠ヤ笂鏄埗瀛愮粍浠剁殑浼唬鐮併€傚彲浠ョ湅鍒扮埗缁勪欢涓紶鍏ョ殑@success鍑芥暟鏄湪闇€瑕佸瓙缁勪欢updateSuccess鏃惰Е鍙戠殑鎬棶棰樸€傜埗缁勪欢鐨刪andleSuccess鍑芥暟鏄彲浠ョ湅鍒颁唬鐮佹墽琛屼簡鎵撳嵃鐨刲og锛屼絾鏄瓙缁勪欢鐨?on-success鍑芥暟鍜寀ploadSuccess鍑芥暟骞舵病鏈夋墽琛屻€傛煡闃呬簡涓€浜涜祫鏂欙紝鐩墠椤圭洰浣跨敤鐨別lement-plus鐗堟湰鏄?.1.8銆傛湁浜鸿鍦?.2.9涔嬪墠涓婁紶缁勪欢鏈塷n-success涓嶈Е鍙戠殑bug锛屼絾鏄苟娌℃湁瑙i噴涓轰粈涔堢埗缁勪欢鐨剆uccess浼氬鎬殑鎵цup銆傛棤鏁堟墜琛ㄧ殑闂鐩稿绠€鍗曘€傜埗缁勪欢浼犲叆鐨勫睘鎬х敤watch鎴杦atchEffect鏄棤鏁堢殑锛屼絾鏄墦鍗板睘鎬у彲浠ョ湅鍒板睘鎬у彂鐢熶簡鍙樺寲銆傜患涓婏紝杩樻湁涓€浜涢棶棰樻病鏈夎В鍐筹紝杩佺Щ鍗囩骇宸ョ▼杩樺湪缁х画銆傛湁鏂伴棶棰樻垜浼氭寔缁洿鏂帮紝鏈В鍐崇殑闂鎴戜細鍔姏瑙e喅銆傚叾瀹炴墜鍔ㄥ崌绾ф病浠€涔堟妧鏈惈閲忋€傛棤闈炴槸Vue鍜屼竴浜涢厤濂楃敓鎬佺殑鏀瑰彉銆傛渶闅惧彈鐨勫彲鑳芥潵鑷簬涓€涓垨涓€缇ょ浠欓槦鍙嬬殑鏆村嚮銆傜敱姝ゅ彲瑙佹矡閫氱殑閲嶈鎬э紒澶氫氦娴佸晩鏈嬪弸锛侌煒?/p>