Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

2022-11-26 0 342

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

译者:穆萨爸爸后端快爆

Vue3 已然出有一两年了,许多好友已然研读了文件格式,写了三四个 Demo,馋 Composition API 等新优点多时了。

无可奈何,在前述组织工作中,绝大部分好友却是不得已守着成千上万行的 Vue2 老工程项目过活,做一场架构升级换代就像给老屋家装——想法常常丰沛,决意常常贫乏。

只不过 Vue 项目组已然尽量地增加了破坏力预览,还提供更多了这份精细的北迁手册,单条许多,但据闻,绝大部分都是活儿,很多很单纯,比如说触发器模块要多常加几层:

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

除了许多就改起来有点儿麻烦事,比如说自订命令开发周期的改名,和传至模块的许多微小变动:

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

看见这种变动后,做为憎恶多次重复的开发人员,已然开始想着能无法写个标识符帮他们把这些准则大批量给复原了,总之,写切换标识符的标识符要比写页面受讯许多,说实话他们以后已然有了两个神沼的辅助工具:GoGoCode

他们以后的该文《穆萨爸爸出的新辅助工具,给大批量修正工程项目标识符减低了伤痛》如是说过它,做为两个更单纯的 AST处理辅助工具,能大大减低切换逻辑的书写难度,简直就是为了这事儿量身打造的!

于是他们梳理了北迁手册里提到的,附带上 vue-router \ vuex 升级换代的许多 API 变动,配合 GoGoCode 书写了近 30 条切换逻辑,涵盖了 Vue2 到 Vue3 标识符 break change 的绝大部分场景,这个程序可以帮助你全屏把 Vue2 的标识符切换成 Vue3 的标识符。

上面提到的两条 Vue2 到 Vue3 的差异对比中,右侧 Vue3 的标识符就是通过这个辅助工具根据左侧 Vue2 标识符原片直出的,效果还不错吧 ^_^,他们来一起试一下!

尝试一下

全局安装 gogocode-cli

在终端(terminal)中跳转到需要升级换代的 Vue 工程项目路径。

如果需要升级换代 src 路径下的 Vue 标识符,执行如下命令

切换操作执行完毕后新的 Vue3 标识符会被写入到 src-out 目录中

我们拿 Vue2 的官方示例工程项目 vue-hackernews-2.0 试了一下,发现在切换的基础上只要稍作改动再改一下构建流程就能跑起来了,许多切换的 Diff 如下:(查看完整 Diff)

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

这里只是简单地如是说,完整的方案请参考:文件格式

实现比预想的要单纯许多

点,并利用 GoGoCode 方便的 API 进行处理。

许多单纯的准则,比如说前面如是说的触发器模块切换直接进行类似字符串的替换即可,由于是基于 AST 的,所以无需关心标识符格式,组织工作量是很小的:

这次工程项目也检验了 GoGoCode 对复杂情况的处理,就像前面提到的自订命令开发周期的变动,也很轻松地做到!

开源了,希望能得到大家的反馈

吃水不忘挖井人,希望这些组织工作能为 Vue 开源社区做些贡献,让社区尽快享受到Vue3带来的技术红利,也让Vue项目组的成员能够拜托 Vue2 的历史包袱,更加聚焦于Vue3新优点的研发!

工程项目伊始,存在的不足之处希望得到大家的反馈和帮助:

钉钉群:34266233

最后:求 star 支持!

官网:gogocode.io

附录:当前切换准则覆盖

准则切换支持文件格式v-for 中的 Ref 数组✔链接[13]触发器模块✔链接[14]attribute 强制行为✔链接[15]$attrs包含class&style✔链接[16]$children✖️链接[17]自订命令✔链接[18]自订元素交互无需切换链接[19]Data 选项✔链接[20]emits选项✔链接[21]事件 API✔链接[22]过滤器✔链接[23]片段✔链接[24]函数式模块✔链接[25]全局 API✔链接[26]全局 API Treeshaking✔链接[27]内联模板 Attribute✖️链接[28]keyattribute✔链接[29]按键修饰符✔链接[30]移除 $listeners✔链接[31]挂载API变动✔链接[32]propsData开发中链接[33]在 prop 的默认函数中访问this无需切换链接[34]渲染函数 API✔链接[35]插槽统一✔链接[36]Suspense无需切换链接[37]过渡的 class 名更改✔链接[38]Transition 做为 Root开发中链接[39]Transition Group 根元素✔链接[40]移除v-on.native修饰符✔链接[41]v-model✔链接[42]v-if 与 v-for 的优先级对比✔链接[43]v-bind 合并行为✔链接[44]VNode 开发周期事件开发中链接[45]Watch on Arrays✔链接[46]vuex✔链接[47]vue-router✔链接

[48]

https://juejin.cn/post/6977259197566517284

重要他们搬家啦Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!01

他们在哪点击下面公众号名片可直达

02本期活动汇总

菜单栏有抽奖

每期头条都有硬核干货

每星期基本都有训练营+免费公开课,敬请期待

03

源码

由于

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好! 抽奖助手 交易担保 放心买 点我点我 Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好! 小程序

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

点个在看你最好看

Vue2 一键转成 Vue3?给你个神器(VUE)记得收藏好!

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务