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

本文主要是介绍《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-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 中:

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

最后

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

这篇关于《Vue3 基础知识》 Vue2+ElementUI 自动转 Vue3+ElementPlus(GoGoCode)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/649948

相关文章

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

SpringBoot实现文件记录日志及日志文件自动归档和压缩

《SpringBoot实现文件记录日志及日志文件自动归档和压缩》Logback是Java日志框架,通过Logger收集日志并经Appender输出至控制台、文件等,SpringBoot配置logbac... 目录1、什么是Logback2、SpringBoot实现文件记录日志,日志文件自动归档和压缩2.1、