网站建设推荐搜狗推广助手

之前 OpenTiny 发布了一篇 Vue2 升级 Vue3 的文章。

🖖少年，该升级 Vue3 了！

里面提到使用了 ElementUI 的 Vue2 项目，可以通过 TinyVue 和 gogocode 快速升级到 Vue3 项目。

有朋友评论替换button出错了，并且贴出了报错截图。

出现这个报错的原因是 TinyVue 组件库当时还不支持 Vue2.7 版本，Vue2.7 是升级 Vue3 的一个过渡版本，支持了 Composition API 写法，相较于 Vue2.6 差异较大。

这个问题早在今年4月份就有社区的朋友 lipan007 提交过 issue：

github.com/opentiny/ti…

这个问题终于将在 TinyVue 的 v2.11.0 版本终结！

目前 v2.11.0 版本已经发布了 alpha 版本，欢迎朋友们体验和使用！

npm i @opentiny/vue@2.11.0-alpha.2

现在带着大家体验下这个版本。

在 Vue2.7 项目中使用 2.10.0 版本的 TinyVue

先用 Vue CLI 创建一个 Vue2 项目

vue create vue2-demo

安装 @opentiny/vue@2 组件库

npm i @opentiny/vue@2

然后把 Vue 和 TinyVue 版本显示出来。

可以看到 Vue 2.7.14 和 TinyVue 2.10.0 的组合，项目是跑不起来的，控制台报错。

[Vue warn]: inject() can only be used inside setup() or functional components.found in---> <Anonymous><TinyButton><App> at src/App.vue<Root>

以前：

不好意思，TinyVue 目前只支持 Vue2.6 和 Vue3+ 版本，还不支持 Vue2.7，你需要把 package.json 文件中的 vue 和 vue-template-compiler 两个包前面的 ^ 去掉，删除 package-lock.json 文件，然后重新执行下 npm i 安装下依赖。

现在：

升级下你的 TinyVue 到 2.11.0 版本就行了。

升级到 2.11.0 版本

执行以下命令，升级 TinyVue 版本。

npm i @opentiny/vue@2.11.0-alpha.2

升级完之后，button 按钮显示正常！

欢迎朋友们体验和使用 2.11.0 版本，如果你在使用过程中有任何问题，欢迎提交 issue 或者加小助手进行反馈：opentiny-official。

关于 OpenTiny

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架的UI组件库，适配 PC 端 / 移动端等多端，支持 Vue2 / Vue3 / Angular 多技术栈，拥有灵活扩展的低代码引擎，包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design/

OpenTiny 代码仓库：github.com/opentiny/

TinyVue 源码：github.com/opentiny/ti…

TinyEngine 源码： github.com/opentiny/ti…

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~