npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zcatpkg/gogocode-plugin-vue

v1.3.1

Published

Downloads

2

Readme

Vue2 到 Vue3 升级插件

配合gogocode-cli使用

开始迁移

​ Vue3的到来为我们带来了许多惊喜的变化,但是由于Vue3对于Vue2在Api层面存在诸多兼容问题,并不能做到平滑升级。所以我们根据v3迁移指南利用gogocode这个代码转换利器,利用它操作AST,开发了一套Vue2升级工具。利用这套工具能够快速地把你的Vue2代码升级到Vue3。​

这套工具使用非常简单,只需要执行简单的命令就可以了。

安装工具

全局安装最新的 gogocode-cli

npm install gogocode-cli -g

迁移源文件

在终端(terminal)中跳转到需要升级的Vue项目路径。如果需要升级src路径下的vue代码,执行如下命令:​

注意:-s 后面是原文件的目录/文件名,-o 后面是输出的目录/文件名,如果两者相同,转换插件会覆盖你的代码,在此操作前请做好备份。

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

转换操作执行完毕后新的Vue3代码会被写入到src-out目录中。

指定应用规则

添加参数 -p include-rules=xxx,yyy,举例只应用 vModelcustomDirectives 规则:

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out -p include-rules=vModel,customDirectives

规则名称请参看 rules.js 里面的 name 字段。

排除应用规则

添加参数 -p exclude-rules=xxx,yyy,举例只排除 vModelcustomDirectives 规则:

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out -p exclude-rules=vModel,customDirectives

规则名称请参看 rules.js 里面的 name 字段。

依赖升级

除了升级源码,我们还需要升级 Vue3 相关依赖,这一点也可以自动完成,在终端(terminal)中跳转到需要升级的Vue项目路径,执行如下命令:

gogocode -s package.json -t gogocode-plugin-vue -o package.json

这条命令会帮你把 package.json 里面的 Vue/Vuex/Vue-router/Vue 编译工具 升级到适配 Vue3 的版本

npm install

即可完成Vue3相关依赖的安装​

注意:如果你是使用老版本的 vue-cli 生成的项目,需要自行升级 vue-cli 以确保 Vue3 项目能成功被构建,可参考:vue-cli2的项目升级到vue-cli4做了哪些事情Migrating from v3

需要关注的地方

​ 我们尽可能让工具自动化,但有些问题还是需要你注意一下。​

全局 App

​ 由于 Vue3 全局对象变成 createApp()创建。转换工具将 createApp() 返回对象传递给 window.$vueApp。此时使用者需要将window.$vueApp = Vue.createApp(App) 代码块移动到调用 window.$vueApp 代码的最前面。避免window.$vueAppundefined 的情况出现。image.png

依赖的 Vue2 组件库需自行升级

​ 一些依赖于 Vue2 开发的组件库也推出了 Vue3 的版本,它们的 API 发生了一些变化,这需要你手动升级。

做好检查和测试

另外,由于是静态的代码转换,可能你的代码里会有些我们没想到的写法导致转换出乱子,转换后请做好人工比对和测试!发现转换的问题可以提交给我们。​

其他项目

其它项目升级请参考Vue官方链接

转换规则覆盖

| 规则 | 转换支持 | 文档 | | --- | --- | --- | | v-for 中的 Ref 数组 | ✔ | 链接 | | 异步组件 | ✔ | 链接 | | attribute 强制行为 | ✔ | 链接 | | $attrs包含class&style | ✔ | 链接 | | $children | ✖️ | 链接 | | 自定义指令 | ✔ | 链接 | | 自定义元素交互 | 无需转换 | 链接 | | Data 选项 | ✔ | 链接 | | emits选项 | ✔ | 链接 | | 事件 API | ✔ | 链接 | | 过滤器 | ✔ | 链接 | | 片段 | ✔ | 链接 | | 函数式组件 | ✔ | 链接 | | 全局 API | ✔ | 链接 | | 全局 API Treeshaking | ✔ | 链接 | | 内联模板 Attribute | ✖️ | 链接 | | keyattribute | ✔ | 链接 | | 按键修饰符 | ✔ | 链接 | | 移除$listeners | ✔ | 链接 | | 挂载API变化 | ✔ | 链接 | | propsData | 开发中 | 链接 | | 在 prop 的默认函数中访问this | 无需转换 | 链接 | | 渲染函数 API | ✔ | 链接 | | 插槽统一 | ✔ | 链接 | | Suspense | 无需转换 | 链接 | | 过渡的 class 名更改 | ✔ | 链接 | | Transition 作为 Root | 开发中 | 链接 | | Transition Group 根元素 | ✔ | 链接 | | 移除v-on.native修饰符 | ✔ | 链接 | | v-model | ✔ | 链接 | | v-if 与 v-for 的优先级对比 | ✔ | 链接 | | v-bind 合并行为 | ✔ | 链接 | | VNode 生命周期事件 | 开发中 | 链接 | | Watch on Arrays | ✔ | 链接 | | vuex | ✔ | 链接 | | vue-router | ✔ | 链接 |

联系我们

如果你在使用过程中遇到其他问题可以通过如下方式联系我们:

github: https://github.com/thx/gogocode/issues

钉钉群:34266233

gogocode 转换问题可以分享https://play.gogocode.io/相关链接给我们

相关文档

vue-cli升级