Vue-class-to-vue3-cli NPM

vue-class → script setup

TODO: 1. 目前用的zx可能会因为用户没有下载zx导致报错。解决方案：目前考虑有2种 1. 判断用户使用的是npm、pnpm、yarn来在用户install之后通过钩子完成 install zx global。 2. 采用更为通用的命令行调用库（待调研）

如果遇到了 env: zx: No such file or directory 请执行 pnpm install zx -g

使用方式
npm run build
pnpm link --global

vue-class-to-vue3 ${fileName}

需要注意的点：

Mixin 由于在vue3里面已经建议用compositionApi代替，并且在script setup中已经取消了支持，所以无法直接完成转换，可以使用工具对mixin进行转换后更改成compositionApi后手动导入。
vModel在vue2和vue3的双向绑定实现具有差异，请留意转换后是否仍然符合预期。
不支持 $filters，vue3已经去掉了这个语法，请使用函数代替，工具会帮你进行函数的转换
@Emit(”callback”) callbackFun 的转换只会变成 const emit = defineEmits(’callback’),如果在代码里使用了 callbackFun(), 请自行改为emit(’callback’)。暂时不支持自动转换

目前已经实现的转换

待转换的代码	转换后的代码
created	在script setup 内相当于直接拿掉 created() {}
mounted	onMounted
ClassProperty	ref / reactive
Get(classMethod)	Computed
vuex-class处理	如果存在使用vuex-class,则会删除相应的import。改为使用 import { useStore } from "vuex”。
this.$ \|\| this.	去除
vue-router	useRouter/useRoute
@Component	去掉
@Props	defineProps
`<script >`	`<script setup>`
函数	转为箭头函数
this.$refs.$1	const $1 = ref()
@Model	defineModel
ref和computed在使用时的转换	收集所有computed和ref，在使用的后面添加.value
@Ref($1) $2	const $2 = ref()
@Emit	const emit = defineEmits
@Component({ props: {} })	const {} = defineProps