当前位置: 首页 > 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标签,一起参与开源贡献~

相关文章:

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

之前 OpenTiny 发布了一篇 Vue2 升级 Vue3 的文章。 &#x1f596;少年&#xff0c;该升级 Vue3 了&#xff01; 里面提到使用了 ElementUI 的 Vue2 项目&#xff0c;可以通过 TinyVue 和 gogocode 快速升级到 Vue3 项目。 有朋友评论替换button出错了&#xff0c;并且贴出了…...

蒙特卡罗算法

介绍 蒙特卡罗算法是一种基于随机采样的数值计算方法&#xff0c;常用于解决复杂问题和优化求解。它的核心思想是通过生成大量的随机样本&#xff0c;利用概率统计的方法来估计问题的解或者优化目标的最优值。 蒙特卡罗算法的具体步骤如下&#xff1a; 1. 定义问题&#xff1a…...

python爬虫hook定位技巧、反调试技巧、常用辅助工具

一、浏览器调试面板介绍 二、hook定位、反调试 Hook 是一种钩子技术&#xff0c;在系统没有调用函数之前&#xff0c;钩子程序就先得到控制权&#xff0c;这时钩子函数既可以加工处理&#xff08;改变&#xff09;该函数的执行行为&#xff0c;也可以强制结束消息的传递。简单…...

Jmeter —— jmeter参数化实现

jmeter参数化   在实际的测试工作中&#xff0c;我们经常需要对多组不同的输入数据&#xff0c;进行同样的测试操作步骤&#xff0c;以验证我们的软件的功能。这种测试方式在业界称为数据驱动测试&#xff0c; 而在实际测试工作中&#xff0c;测试工具中实现不同数据输入的过…...

Day57_《MySQL索引与性能优化》摘要

一、资料 视频&#xff1a;《尚硅谷MySQL数据库高级&#xff0c;mysql优化&#xff0c;数据库优化》—周阳 其他博主的完整笔记&#xff1a;MySQL 我的笔记&#xff1a;我的笔记只总结了视频p14-p46部分&#xff0c;因为只有这部分是讲解了MySQL的索引与explain语句分析优化…...

蓝桥杯每日一题2023.11.11

题目描述 “蓝桥杯”练习系统 (lanqiao.cn) 题目分析 对于此题首先想到的是暴力分析&#xff0c;使用前缀和&#xff0c;这样方便算出每一区间的大小&#xff0c;枚举长度和其实位置&#xff0c;循环计算出所有区间的和进行判断&#xff0c;输出答案。 非满分暴力写法&#…...

『Linux升级路』基础开发工具——vim篇

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、vim的基本概念 &#x1f4d2;1.1命令模式 &#x1f4d2;1.2插入模式 &…...

【Excel】补全单元格值变成固定长度

我们知道股票代码都为6位数字&#xff0c;但深圳中小板代码前面以0开头&#xff0c;数字格式时前面的0会自动省略&#xff0c;现在需要在Excel表格补全它。如下图&#xff1a; 这时我们需要用到特殊的函数&#xff1a;TEXT或者RIGHT TEXT函数是Excel中一个非常有用的函数。TEX…...

HackTheBox-Starting Point--Tier 2---Base

文章目录 一 题目二 过程记录2.1 打点2.2 权限获取2.3 横向移动2.4 权限提升 一 题目 Tags Web、Vulnerability Assessment、Custom Applications、Source Code Analysis、Authentication、Apache、PHP、Reconnaissance、Web Site Structure Discovery、SUDO Exploitation、Au…...

算法导论笔记4:散列数 hash

一 了解一些散列的基本概念&#xff0c;仅从文字角度&#xff0c;整理了最基础的定义。 发现一本书&#xff0c;《算法图解》&#xff0c;微信读书APP可读&#xff0c;有图&#xff0c;并且是科普性质的读物&#xff0c;用的比喻很生活化&#xff0c;可以与《算法导论》合并起…...

知识蒸馏概述及开源项目推荐

文章目录 1.介绍2.知识2.1 基于响应的知识&#xff08;response-based&#xff09;2.2 基于特征的知识(feature-based)2.3 基于关系的知识(relation-based) 3.蒸馏机制3.1 离线蒸馏3.2 在线蒸馏3.3 自蒸馏 4.教师-学生架构5.蒸馏算法5.1 对抗性蒸馏&#xff08;Adversarial Dis…...

jupyter notebook中markdown改变图像大小

文章目录 &#x1f56e;原始图像&#x1f56e;改变图像大小&#x1f56e;使图像靠左 在 jupyter notebook中&#xff0c;导入的图片过大&#xff0c;想要改变图像的大小 &#x1f56e;原始图像 &#x1f56e;改变图像大小 复制小括号里面的内容到src后面&#xff0c;满足<…...

SpringGateWay——yml文件配置详解

Spring Gateway 是一个基于 Spring 框架的网关服务&#xff0c;主要作用是将流量路由到不同的微服务中。它的灵活性和可扩展性使它成为构建云原生应用架构的不二之选。 下面是 Spring Gateway 的 yml 文件配置参数详解&#xff1a; spring:cloud: gateway: routes: # 路由相…...

Haproxy实现七层负载均衡

目录 Haproxy概述 haproxy算法&#xff1a; Haproxy实现七层负载 ①部署nginx-server测试页面 ②(主/备)部署负载均衡器 ③部署keepalived高可用 ④增加对haproxy健康检查 ⑤测试 Haproxy概述 haproxy---主要是做负载均衡的7层&#xff0c;也可以做4层负载均衡 apache也可…...

k8s最详细集群部署

安装kubeadm、kubectl、和 kubelet 这里通过百度网盘下载所需要的安装包&#xff1a; 链接: k8s部署包.zip_免费高速下载|百度网盘-分享无限制 提取码: 0000 1、下载部署包到本地后&#xff0c;在k8s部署包/k8s目录下 执行此yum命令安装&#xff1a;yum localinstall ./*.r…...

Redis底层数据结构:字典

在 Redis 中&#xff0c;字典&#xff08;Dictionary&#xff09;是一种常用的底层数据结构&#xff0c;它被用于实现 Redis 的哈希表&#xff08;Hash Table&#xff09;数据结构。字典用于存储键值对&#xff0c;它提供了快速的键值查找、插入和删除操作。 Redis 字典的特点&…...

upload 文件自动上传写法,前后端 下载流文件流

<el-uploadv-model:file-list"fileList":action"app.api/student/student/import":headers"{// Content-Type: multipart/form-data;boundary----split-boundary, 此处切记不要加&#xff0c;否则会造成后端报错 Required request part file is…...

Python文件、文件夹操作汇总

目录 一、概览 二、文件操作 2.1 文件的打开、关闭 2.2 文件级操作 2.3 文件内容的操作 三、文件夹操作 四、常用技巧 五、常见使用场景 5.1 查找指定类型文件 5.2 查找指定名称的文件 5.3 查找指定名称的文件夹 5.4 指定路径查找包含指定内容的文件 一、概览 ​在…...

CHM Viewer Star 6.3.2(CHM文件阅读)

CHM Viewer Star 是一款适用于 Mac 平台的 CHM 文件阅读器软件&#xff0c;支持本地和远程 CHM 文件的打开和查看。它提供了直观易用的界面设计&#xff0c;支持多种浏览模式&#xff0c;如书籍模式、缩略图模式和文本模式等&#xff0c;并提供了丰富的功能和工具&#xff0c;如…...

【GIT】git分支命令,使用分支场景介绍git标签介绍,git标签命令,git标签使用的场景git查看提交历史

目录 一&#xff0c;git分支命令&#xff0c;使用分支场景介绍 二&#xff0c;git标签介绍&#xff0c;git标签命令&#xff0c;git标签使用的场景 三&#xff0c;git查看提交历史 前言&#xff1a; 今天我们来聊聊关于Git 分支管理。几乎每一种版本控制系统都以某种形式支持…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...