vue使用tsx语法必不可缺少的两个插件

最新推荐文章于 2024-09-09 12:00:35 发布
最新推荐文章于 2024-09-09 12:00:35 发布
阅读量945 收藏 2
点赞数 1
文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41013537/article/details/120563129
版权
在VueCLI项目开发中遇到使用TSX语法报错的问题，尝试安装@vue/babel-plugin-jsx未成功。经过排查，发现缺少@vue/cli-plugin-babel插件。安装该插件到devDependencies后，报错消失，顺利使用TSX进行开发。
摘要由CSDN通过智能技术生成

用vuecli新建项目的时候，再次基础上我们开发的时候如果想用tsx语法，会报错

 

这是我的tsx语法，报错信息是上面的，下面是安装的插件，按照官方提示已经安装了@vue/babel-plugin-jsx，但还是报错上面的信息，后来经过不断排查，终于发现问题

在此基础上安装一个插件 @vue/cli-plugin-babel 到 devDependencies  大功告成，再也不会报错啦

 

 

隔壁老王小媳妇
关注
手把手教你如何在vue3中使用tsx渲染组件（必看）
蜗牛~~
08-08 922
注意：子组件中需要添加 emits: ["numClick"]，同vue3类似，vue3中也需要添加defineEmits将事件发射出去。vue中子向父传值都是emit的方式，这个在vue3中写法相似，只是多了一个定义emit的步骤，这也是为了后续的类型推导做准备。注意：v-model里面绑定变量需要加上 .value ，这也是与vue3的区别。v-model，v-show跟以前的用法类似，但注意后面不是双引号“”，而是大括号{}注意：父组件接收子组件发射的方法同样需要加上 on。
vue+tsx初体验
Sakura_Codeboy的博客
08-14 3479
随着vue3.0更新潮流，vue+ts应该是未来vue项目的一个主流方向。 以前就算用vue-class-component用来写也会有很多暗坑，但是现在vue3.0版本完美支持tsx，终于可以快乐的尝尝鲜了。 首先明确2点： Q：ts有什么用？ A：类型检查、直接编译到原生js、引入新的语法糖 Q：为什么用ts？ A：TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程
基于vue-cli3+typescript的tsx开发模板搭建过程分享
11-20
项目创建 使用 vue-cli3+ 创建一个基于 ts 的模板： vue-tsx-support 上一步中已经创建完了基于 ts 的 vue 模板，但是开发方式还是如同之前的 template 一样，只是将 script 中的 js 部分改成了 ts 来书写。接下来就将 模板(template) 方式改成 tsx 的方式，这里需要借助一个库 — vue-tsx-support 首先安装 vue-tsx-support ：  npm install vue-tsx-support --save # or yarn add vue-tsx-support 安装结束后，我们需要对我们的文件做点
vue3+tsx
weixin_45535843的博客
02-27 177
vue3+tsx
Vue3 用了这么久还没体验过 JSX/TSX？来封装个业务弹窗玩玩
最新发布
2401_86113453的博客
09-09 1725
平时开发Vue项目时，用的最多的就是模板组件，一些模板组件实现起来稍微麻烦的需求，也会用到渲染函数，对于JSX/TSX的应用相比之下就少了很多，不知大家是否也是如此呢？不过没关系，今天我们来详细的梳理下如何在Vue项目中使用JSX。建议跟着文章敲起来，为自己的技术道路添砖加瓦。JSXJSX是一种类似XML的JavaScript扩展，本身没有特定的语义。JavaScript引擎和浏览器没有直接实现它，也没有纳入ECMAScript规范，核心作用就是被各种编译器（如Babel）解析，转换成标准的。
vue3学习笔记之TSX的使用
小多的博客
01-12 6104
绑定事件按照React的风格来。构建的，所以安装的是。
7-vue-2
loveX001的博客
02-26 701
----------@----------1、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下之前我们或许会面临的问题而 经过长达两三年时间的筹备，做了哪些事情？我们从结果反推一句话概述，就是更小更快更友好了更小更快主要体现在编译方面：更友好在兼顾的的同时还推出了，大大增加了代码的逻辑组织和代码复用能力这里代码简单演示下：存在一个获取鼠标位置的函数 我们只需要调用这个函数，即可获取、的坐标，完全不用关注实现过程试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率
vue学习
希望我快乐
06-11 812
1. 安装node，直接官网下载安卓即可，会自动安装上npm。 网址：https://nodejs.org 2. 检测node是否安装成功，在终端输入：node -v 以及 npm -v，若有版本信息，则安装成功。 3. 全局安装cli3 npm install -g @vue/cli vue -V(大写) 查看vue版本信息，若有信息则安装成功。 4. cd到工作目录，使用vue ui可视化创建...
2024前端面试题！（附答案及解析）（2024.10月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 17万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.10月最新版）感谢支持，你们的鼓励是我的动力！
vite简介/如何在已有项目中使用vite
Chancetop的博客
10-21 1813
开箱即用的一种新型前端构建工具
idea使用monaco_使用Monaco和ANTLR编写基于浏览器的编辑器
danpu0978的博客
05-28 1555
idea使用monaco 这是关于为我们将要定义的新语言创建基于浏览器的编辑器的教程。 我们将使用两个组件： Monaco ：它是一个很棒的基于浏览器的编辑器（或一个Web编辑器：如您所愿） ANTLR ：这是我们喜欢用来构建各种解析器的解析器生成器 我们将为一种简单的语言构建一个编辑器以执行计算。 结果将是这样的： 所有代码均可在线获得： calc-monaco-e...
TSX常见简单用法（入门） Vue3+Vite
qq_55628994的博客
06-01 1万+
2.vite.config.ts里的配置 3.tsconfig.json里的配置 这三条为配置项 2.使用TSX app.vue里的代码 2.app.tsx的代码 注意: 1.tsx里面写的标签内容是不会自动解构的，所以ref里面的.value还是要加上值才会出来2.tsx里面支持v-show,v-model,但不支持v-bind,v-for,v-if，所以再写这些的时候要更改写法 v-if使用三元表达式 v-for通过map函数遍历数组来实现 v-
学习Vue3 第二十五章（TSX）
qq1195566313的博客
02-28 2万+
我们之前呢是使用Template去写我们模板。现在可以扩展另一种风格TSX风格 vue2 的时候就已经支持jsx写法，只不过不是很友好，随着vue3对typescript的支持度，tsx写法越来越被接受 1.安装插件 npm install @vitejs/plugin-vue-jsx -D vite.config.ts 配置 2.修改tsconfig.json 配置文件 "jsx": "preserve", "jsxFactory": "h", "jsxFra
Vue-cli3中使用TS语法,以及使用例子
u012732909的博客
04-27 4152
ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖 为什么用ts？ TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的
Vue 2.7 is Now in Beta
weixin_51083890的博客
07-05 2734
今天，Vue 创始人尤雨溪刚刚正式发布了 Vue 2.x 最后一个版本：Vue 2.7，代号 “Naruto”（火影忍者）。尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。此外，还支持以下 API：defineComponent()具有改进的类型推断（与Vue.extend)h(), , ,useSlot()useAtt
vue旧项目升级到2.7后使用script setup语法，并使用pinia，支持typescript
10-27 3478
以前使用vue2的项目已经老了，在新项目中习惯了script setup写法之后，已经不想在写老代码了，但是将vue2整体升级到vue3又很痛，刚好vue2的终极版本2.7.13整合了script setup的用法，可以很愉快的整合并开写script setup了，其中慢慢将vuex替换成pinia，到某一天，都换完了，就能直接install vue3，何不爽YY（前提是没有很多自定义的vue2内容，仅针对script setup和store的使用）。下面就是开始愉快的改在自己需要的store逻辑了。
vue项目使用tsx
ike_yu的博客
04-28 1532
使用webpack处理，配置如下index.tsx// Vue3中没有Vue.extend，可以用defineComponent来代替data () {return {num: 0},// 注意：父组件中ref修改响应数据，无法导致num刷新console.log('点击');expose({ // 默认只会暴露属性，故需要expose暴露num,});<div></div>// console.log('点击');// };// )
jsx/tsx使用cssModule和typescript-plugin-css-modules
鹏多多的博客
07-25 2733
不管是vue还是react，都可以写jsx/tsx，为了避免样式污染，常用的方式有两种。一种是每个组件都用一个唯一类名class包裹，使用less/scss嵌套样式。另一种是使用cssModule模块化。
快速入门：在vue中使用tsx
随便写写
10-18 6168
快速入门在vue里写tsx写法
使用vue3+tsx语法实现这个需求
06-03
好的，那我来给你提供一个使用 Vue 3 + TSX 语法的实现方案。 首先，我们需要安装 `@vue/runtime-dom` 和 `@vue/compiler-dom` 这两个包以支持 Vue 3 的编译和运行时： ``` npm install @vue/runtime-dom @vue/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值