今天起正式將前面vue2的項目升級成vue3，該項目將使用element ui3+vue3+vue router 4+typescript完成，這里將遷移碰到的一些問題，記錄一下。
參考學習內容如下：
element ui3官網
vue3官網
typescript有關
1.keyup.enter.native報錯
原因：
經查官網，.native的寫法已經廢除
解決：將keyup.enter.native改為keyup.enter
2.vue3中使用beforeRouteEnter報錯
需求：
路由進入時渲染背景圖片
可以看到，導入時，只有如下兩個選項可供選擇，而在setup中寫beforeRouteEnter又會報錯
原因：
經多方查找，發現目前使用的版本為vue-router4,BeforeRouteLeave在router4中被改為onBeforeRouteLeave，BeforeRouteUpdate則被改為onBeforeRouteUpdate，至于beforeRouteEnter則沒有找到對應的hook
解決：不需要導入，只需要寫在setup外即可，如圖：
3.類型“Window & typeof globalThis”上不存在屬性“xxx”
需求：
想在生產環境下統一配置url，不用每次修改后打包（配置方法）,結果ts的語法檢查出現了這樣一個錯誤
解決：在項目中找到*.d.ts 文件 加上以下代碼即可：
declare interface Window {
PLATFROM_CONFIG: any
}
還有一種方法（不推薦）：直接將window對象定義為any類型
(window as any).xxx
4.vue3匹配所有路由報錯：Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp
需求：添加一個404路由，匹配所有錯誤路徑，結果使用path: "*",會報下面這樣一個錯誤
image.png
解決：使用：path: "/:pathMatch(.)"
5.組件中使用.sync修飾符會報錯，如圖
'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead
需求：需要子組件將加載過來的圖片放到父組件數組中，以實現在父組件中預覽圖片時可切換圖片
原因：vue3中 sync的修飾符已經廢棄，詳細內容見：vue3中文文檔
解決：使用v-model ，如圖：
6.vue3如何使用emit
vue2中用法：
this.$emit('xxx') //不帶參數
this.$emit('xxx',arg) //帶參數
vue3用法：
setup(props: any, context: any) {
context.emit('xxx') //不帶參數
context.emit('xxx',arg) //帶參數
}
7.vue3+ts中使用process報錯，找不到名稱“process”。是否需要為節點安裝類型定義?
第一步：npm i --save-dev @types/node
第二步：找到tsconfig.json文件，引入node："types": ["node"]
