当前位置: 首页 > news >正文

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

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

🖖少年,该升级 Vue3 了!

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

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

vue2.7替换button出错.png

出现这个报错的原因是 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 版本显示出来。

vue2.7+tiny-vue2.10.png

可以看到 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

tiny-vue2.11.0.png

升级完之后,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标签,一起参与开源贡献~

http://www.lryc.cn/news/226899.html

相关文章:

  • 蒙特卡罗算法
  • python爬虫hook定位技巧、反调试技巧、常用辅助工具
  • Jmeter —— jmeter参数化实现
  • Day57_《MySQL索引与性能优化》摘要
  • 蓝桥杯每日一题2023.11.11
  • 『Linux升级路』基础开发工具——vim篇
  • 【Excel】补全单元格值变成固定长度
  • HackTheBox-Starting Point--Tier 2---Base
  • 算法导论笔记4:散列数 hash
  • 知识蒸馏概述及开源项目推荐
  • jupyter notebook中markdown改变图像大小
  • SpringGateWay——yml文件配置详解
  • Haproxy实现七层负载均衡
  • k8s最详细集群部署
  • Redis底层数据结构:字典
  • upload 文件自动上传写法,前后端 下载流文件流
  • Python文件、文件夹操作汇总
  • CHM Viewer Star 6.3.2(CHM文件阅读)
  • 【GIT】git分支命令,使用分支场景介绍git标签介绍,git标签命令,git标签使用的场景git查看提交历史
  • Zeitgeist ZTG Token以及其预测市场加入Moonbeam生态
  • AM@方向导数概念和定理
  • 微信小程序隐私政策不合规,应当由用户自主阅读后自行选择是否同意隐私政策协议,不得默认强制用户同意
  • Python中如何判断两个对象的内存地址是否一致?
  • 唯美仙侠3D手游2023【仙变3】画面精美/linux服务端+双端+GM后台+运营后台+详细教程
  • React组件通信:如何优雅地实现组件间的数据传递
  • 数据分析实战 | 逻辑回归——病例自动诊断分析
  • Eigen::Matrix<double,3,1> F;Eigen::MatrixXd F (3, 2);这两行代码有什么区别?
  • Java Agent - 应用程序代理-笔记
  • gird 卡片布局
  • C#医学检验室(LIS)信息管理系统源码