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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/124917.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java进阶(垃圾回收GC)——理论篇:JVM内存模型 垃圾回收定位清除算法 JVM中的垃圾回收器

前言 JVM作为Java进阶的知识&#xff0c;是需要Java程序员不断深度和理解的。 本篇博客介绍JVM的内存模型&#xff0c;对比了1.7和1.8的内存模型的变化&#xff1b;介绍了垃圾回收的语言发展&#xff1b;阐述了定位垃圾的方法&#xff0c;引用计数法和可达性分析发以及垃圾清…

基于指数分布算法的无人机航迹规划-附代码

基于指数分布算法的无人机航迹规划 文章目录 基于指数分布算法的无人机航迹规划1.指数分布搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用指数分布算法来优化无人机航迹规划。 …

阿里云服务器密码在哪查看?如何设置修改初始密码?

阿里云服务器创建后没有默认初始密码&#xff0c;需要用户通过重置实例密码的方式来设置新的密码&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云服务器ECS重置实例密码的详细操作流程&#xff1a; 阿里云服务器重置密码方法 1、登录到阿里云服务器管理控制台 2、左侧…

乐园要吸引儿童还是家长?万达宝贝王2000万会员的求精之路

2023年6月&#xff0c;万达宝贝王正式迈入“400店时代”。 万达宝贝王在全国200多座城市&#xff0c;以游乐设施、主题活动、成长课程服务10亿多用户&#xff0c;拥有2000多万名会员&#xff0c;是真正的国内儿童乐园领跑者。 当流量时代变成“留量”时代&#xff0c;用户增长…

按键精灵中的UI界面操作

1. 按键精灵中UI界面常用的控件 1. 文字框 界面1: {标签页1:{文字框:{名称:"文字框1",显示内容:"显示内容",文字大小:0,高度:0,宽度:0,注释:"文字大小、高度、宽度是可选属性&#xff0c;如需使用默认值&#xff0c;可保持值为0或直接删除此属性&qu…

汽车制造业,通常都穿用哪些防护功能的劳保鞋呢?

近年来汽车行业发展迅速&#xff0c;各家各户有条件的话都会买车&#xff0c;汽车已经成为人们主要出行工具。随着人们生活水平的提高&#xff0c;汽车市场需求持续增长&#xff0c;现在的汽车制造厂也是越来越多&#xff0c;使得汽车制造业成为机械行业的重要支柱之一。 那么对…

【深度学习】可交互讲解图神经网络GNN

在正式开始前&#xff0c;先找准图神经网络GNN(Graph Neural Network)的位置。 图神经网络GNN是深度学习的一个分支。 深度学习的四个分支对应了四种常见的数据格式&#xff0c;前馈神经网络FNN处理表格数据&#xff0c;表格数据可以是特征向量&#xff0c;卷积神经网络CNN处理…

Spark大数据应用实战

系列文章目录 送书第一期 《用户画像&#xff1a;平台构建与业务实践》 送书活动之抽奖工具的打造 《获取博客评论用户抽取幸运中奖者》 送书第二期 《Spring Cloud Alibaba核心技术与实战案例》 送书第三期 《深入浅出Java虚拟机》 送书第四期 《AI时代项目经理成长之道》 …

昇腾CANN 7.0 黑科技:DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶颈

在NPU/GPU上进行模型训练计算&#xff0c;为了充分使用计算资源&#xff0c;一般采用批量数据处理方式&#xff0c;因此一般情况下为提升整体吞吐率&#xff0c;batch值会设置的比较大&#xff0c;常见的batch数为256/512&#xff0c;这样一来&#xff0c;对数据预处理处理速度…

第十五章,输入输出流代码

package 例题;import java.io.File;public class 例题1 {public static void main(String[] args) {//创建文件对象File file new File("D:\\Java15-1.docx");//判断&#xff0c;如果该文件存在。exists存在的意思if (file.exists()) {//删除//file.delete();//Syst…

Modbus协议简介及模拟环境搭建

Modbus协议是一种已广泛应用于当今工业控制领域的通用通讯协议&#xff0c;Modbus 是MODICON公司&#xff08;现为施耐德电气公司的一个品牌&#xff09;最先倡导的一种软的通讯规约。 通过此协议&#xff0c;控制器相互之间、或控制器经由网络(如以太网)可以和其它设备之间进…

【JavaEE】HTTP协议(什么是HTTP?、HTTP格式、form表单和ajax构造HTTP)

一、什么是HTTP协议&#xff1f; 1.1 HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议 1.2 理解HTTP协议的工作过程 当我们在浏览器中输入一个 “网址”, 此时浏览器就会给对应的服务器发送一个 HTTP 请求. 对方服务器收到这个请求之后, 经过计算处理, 就…

Python基础入门----Python模块和包:导入模块、创建自己的模块和包

文章目录 Python模块和包:导入模块、创建自己的模块和包导入模块创建自己的模块创建包使用相对导入Python模块和包:导入模块、创建自己的模块和包 Python是一种功能强大的编程语言,它的模块和包系统是其强大功能的基石之一。在Python中,模块是包含Python定义和声明的文件。…

新功能案例分享丨DolphinDB 与你相约上海,报名限时开放!

这一次 D-Day 系列活动来到了上海&#xff0c;DolphinDB 将联合华金证券&#xff0c;以 “ DolphinDB 新功能及私募行业案例分享” 为主题&#xff0c;为大家带来一场精彩的线下主题交流。快点击链接报名本次活动吧~ 活动时间&#xff1a;11月16日下午13:30 活动地点&#xf…

出口美国操作要点汇总│走美国海运拼箱的注意事项│箱讯科技

01服务标准 美国的货物需要细致的服务&#xff0c;货物到港后的服务也是非常重要的。如果在货物到港15天内&#xff0c;如果没有报关行进行(PROCEED)&#xff0c;货物就会进入了G.O.仓库&#xff0c;G.O.仓库的收费标准是非常高的。 02代理资格审核 美国航线除了各家船公司&a…

深入理解 Django 模板系统

概要 在任何 Web 开发过程中&#xff0c;渲染和展示数据是不可或缺的一部分。Django 作为一个高效的 Python Web 框架&#xff0c;提供了一个强大且灵活的模板系统。本文将详细介绍 Django 模板系统的核心概念、语法和高级功能。 一、Django 模板系统简介 Django 的模板系统允…

机器视觉人体跌倒检测系统 - opencv python 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 机器视觉人体跌倒检测系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&…

商人宝:网页收银软件有哪些功能

网页收银软件凭借无需安装、无需手工升级以及良好的用户体验等优势迅速发展并替代传统收银软件&#xff0c;今天商人宝为大家分享网页收银软件一般有哪些功能。欢迎大家点赞关注&#xff0c;以及收藏本文章&#xff0c;以便后续多看多了解。 1、快速收银 通过扫码枪快速将商品加…

代码随想录算法训练营第16天|104. 二叉树的最大深度111.二叉树的最小深度222.完全二叉树的节点个数

JAVA代码编写 104. 二叉树的最大深度 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; …

2023年下半年信息系统项目管理师下午真题及答案解析(第三批)

试题一(6分) 项目有A、B、C、D、E、F 6个活动&#xff0c;各活动的关系如下表&#xff1a; 2023年下半年信息系统项目管理师下午真题答案及解析 试题一(6分)