《Vue3 基础知识》 Vue2+ElementUI 自动转 Vue3+ElementPlus(GoGoCode)

前言

GoGoCode 一个基于 AST 的 JavaScript/Typescript/HTML 代码转换工具。

AST abstract syntax code 抽象语法树。

实现

第一步:安装 GoGoCode 插件

全局安装最新的 gogocode-cli 即可

npm i gogocode-cli -g

查看版本

gogocode-cli -V

相关插件说明

插件描述
gogocode-cligogocode 的命令行工具
gogocode-plugin-vue通过这个 gogocode 插件可以把 vue2 语法的项目转换成 vue3 的
gogocode-plugin-element通过这个 gogocode 插件可以把 Element UI转换成 Element Plus
gogocode-playground可以在浏览器里尝试 gogocode 转换
gogocode-vscode在 vscode 中通过此插件用 gogocode 重构你的代码

第二步:格式化源码

官网推荐 格式化源代码,方便对比代码更改!这样在后面的转换也会少一些奇怪的错误!很重要!!!

命令如下:

gogocode -s ./src -t gogocode-plugin-prettier  -o ./src

可直接覆盖 Y
在这里插入图片描述

第三步:Vue2 转 Vue3

提供两种方式:

  1. 使用命令 gogocode-plugin-vue
  2. 使用 VSCode 插件 GoGoCode Refactor

上述两种方式我都测过,效果一致!接下来我们以更快捷的方式 2为例!

使用 VSCode 插件 GoGoCode Refactor

  1. VSCode 安装插件 GoGoCode Refactor

    在这里插入图片描述

  2. 右键 Vue 项目文件夹打开菜单,多出两个选项 用 GoGoCode 转换vue2 升级为vue3。选第二个就行!
    如果右键文件则只有 用 GoGoCode 转换

    在这里插入图片描述

  3. 此时代码已经开始转换,安静的等一会儿!成功后右下角会有成功提示:

在这里插入图片描述

  1. 被转换的文件夹会新建一个同名且加 -out 后缀的文件夹。例如: srcsrc-out

第四步:Element UI 转 Plus

官网 Element UI 到 Element Plus 升级指南 在此!

使用命令转,转换成功后的代码在新建文件夹 src-out 中:

gogocode -s ./src -t gogocode-plugin-element -o ./src-out

在这里插入图片描述

第五步:手动修改

  1. 转换后 .vue 文件中的 CSS 有些混成一排了,暂没找到原因和规律…

    • 安装 VSCode 扩展插件 vue-format,使用命令 alt + ctrl + p,可解决上述问题,会自动自动对齐。但如下情况不适用:

      • 没有花括号 {} 就不要动了(现在有点不理解);

      • /deep/ 连一块,要手动换行;

      • 没有 ; 分号结尾的属性,也要手动换行;

    • 如下也会报错,全局搜 /*// 然后删除。

在这里插入图片描述

  1. 插槽报错Duplicate slot names found 发现重复的插槽名称 。有时会出现…

在这里插入图片描述

  1. HTML 元素上的方法,例如 @click= 中有多个表达式仅换行没分号 ; ,这是语法错误。建议多个表达式就写在方法里

最后

虽然自动转方便很多,但其中的细节还有待优化!掌握正确的语法和构建逻辑,才能更好的使用 自动 工具!
扩展篇《使用 GoGoCod 升级到Vue3+ElementPlus 适配处理》

  • 21
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值