vue2升级vue3

我的思路有两个:

1. 新建vite+vue3+ts项目
2. 写一个自动迁移工具(但是需要了解webpack和vue2 与 vue3版本完全不兼容的语法或api)

参考文档：

1. vue3迁移指南 https://v3-migration.vuejs.org/zh/
2. @vue/compat的使用: https://article.juejin.cn/post/7401824176229384226

整体流程

1. webpack --> vite
2. 语法暂时不动
3. vant控件暂时不动
4. 硬件交互需要使用postMessage调用uniapp的语法，然后在uniapp的页面进行调用。

最稳定的升级方法(不需要重新梳理逻辑)

1. 新建一个vite+vue3项目
2. 先迁移webpack的构建配置
3. 页面单独一个个迁移,组件直接复制过来
4. 安装并配置迁移构建版本@vue/compat(注意node版本)
5. 运行，查看浏览器控制台报错-----> 解决它
6. 开启一个uniapp的空项目，使用webview来进行套壳
7. 使用postmessage进行与uniapp进行通信，实现调硬件的功能
8. 打包

语法可以慢慢进行升级，等完全改成vue3的语法的时候，删掉@vue/compat

实战:

1. 新建一个vue3+ts+vite的项目，记录下node和npm的版本号

node: v20.20.2
npm : v10.8.2

2. 迁移vite配置

3. vue2与vue3不兼容的组件库:
   element-ui ----> element-plus
   iView ----> view-ui-plus Vue-Quill-Editor ---> @vueup/vue-quill

4. 没用的js库 FastClick ----> 删除，浏览器已经不存在这个问题了