OpenTiny Vue 组件库支持 Vue2.7 啦!

之前 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 版本,欢迎朋友们体验和使用!

css 复制代码
css
复制代码
npm i @opentiny/vue@2.11.0-alpha.2

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

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

先用 Vue CLI 创建一个 Vue2 项目

lua 复制代码
lua
复制代码
vue create vue2-demo

安装 @opentiny/vue@2 组件库

css 复制代码
css
复制代码
npm i @opentiny/vue@2

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

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

markdown 复制代码
markdown
复制代码
[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 版本就行了。

注意:目前只发布了 alpha 版本,正式版本预计月底发布。

升级到 2.11.0 版本

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

css 复制代码
css
复制代码
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🌟TinyEngineTinyVueTinyNGTinyCLI~

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

相关推荐
一孤程5 小时前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest
IT_陈寒5 小时前
SpringBoot自动配置不是你以为的那样的智能
前端·人工智能·后端
yume_sibai6 小时前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
Hyyy6 小时前
很多Desktop都在上的Computer Use是什么
前端·llm
慢功夫6 小时前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
你挚爱的强哥7 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
huashengzsj7 小时前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓7 小时前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方8 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
卓怡学长8 小时前
w266基于spring boot + vue 圣地延安美食乐享系统
java·数据库·vue.js·spring boot·spring·intellij-idea