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

前言

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

AST abstract syntax code 抽象语法树。

实现

第一步:安装 GoGoCode 插件

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

bash 复制代码
npm i gogocode-cli -g

查看版本

bash 复制代码
gogocode-cli -V

相关插件说明

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

第二步:格式化源码

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

命令如下:

bash 复制代码
gogocode -s ./src -t gogocode-plugin-vue  -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。选第二个就行!

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

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

第四步:Element UI 转 Plus

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

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

bash 复制代码
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= 中有多个表达式仅换行没分号 ; ,这是语法错误。建议多个表达式就写在方法里

最后

虽然自动转方便很多,但其中的细节还有待优化!掌握正确的语法和构建逻辑,才能更好的使用 自动 工具!

相关推荐
我在北京coding28 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾2 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉2 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~3 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel