今天起正式将前面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"]
