在vue3+vite项目中使用jsx语法

如果我掏出下图,阁下除了私信我加入学习群,还能如何应对?

在这里插入图片描述

正文开始

  • 前言
  • 一、下载资源
  • 二、利用vite工具引入babel插件
  • 总结


前言

最近在为部署人员开发辅助部署的工具,技术栈是vue3+vite+electron,在使用jsx语法时,提示我需要引入插件,所以就找到了vue3+vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法,那么此篇文章对您无益。


一、下载资源

首先要下载我们需要的资源:

  1. 安装jsx支持插件:
npm install @vue/babel-plugin-jsx -D
  1. vite项目中没有babel.config.js配置,所以按照babel-plugin-jsx官网的介绍,是无法在vite中引入此插件的,我们需要借助vite提供的工具:@vitejs/plugin-vue-jsx,下载该插件
 npm install --legacy-peer-deps  @vitejs/plugin-vue-jsx

我的vite版本过低,和此插件不兼容,所以加了 --legacy-peer-deps参数,如果不加此参数并不报错,可不加。

二、利用vite工具引入babel插件

借助vite工具引入babel插件,需要我们在vite.config.js中引入并使用插件@vitejs/plugin-vue-jsx:

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({...plugins: [vue(),vueJsx({include:/\.[jt]xs$|\.js$/})],...})

在引入插件的地方调用vueJsx,注意需要维护include参数,否则jsx插件默认的是只在.jsx/.tsx文件中生效。

做完这些,就可以在vue3中愉快地使用jsx语法了。


总结

不知道为什么,即使在include中维护了.vue,也不能在.vue文件中使用jsx,不过如果采用vue3组合式语法的规范开发,正常情况下也不需要在vue文件中使用jsx。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

08-2_Qt 5.9 C++开发指南_坐标系统和坐标变换

文章目录 1. 坐标变换函数2. 视口和窗口 1. 坐标变换函数 QPainter 在窗口上绘图的默认坐标系统如下图所示,这是绘图设备的物理坐标。 为了绘图的方便,QPainter 提供了一些坐标变换的功能,通过平移、旋转等坐标变换,得到一个逻辑…

linux Ubuntu 更新镜像源、安装sudo、nvtop、tmux

1.更换镜像源 vi ~/.pip/pip.conf在打开的文件中输入: pip.conf [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple按下:wq保存并退出。 2.安装nvtop 如果输入指令apt install nvtop报错: E: Unable to locate package nvtop 需要更新一下apt&a…

gitlab 503 错误的解决方案

首先使用 sudo gitlab-ctl status 命令查看哪些服务没用启动 sudo gitlab-ctl status 再用 gitlab-rake gitlab:check 命令检查 gitlab。根据发生的错误一步一步纠正。 gitlab-rake gitlab:check 查看日志 tail /var/log/gitlab/gitaly/current删除gitaly.pid rm /var/opt…

SpringBoot 的自动装配特性

1. Spring Boot 的自动装配特性 Spring Boot 的自动装配(Auto-Configuration)是一种特性,它允许您在应用程序中使用默认配置来自动配置 Spring Framework 的各种功能和组件,从而减少了繁琐的配置工作。通过自动装配,您…

React Native数据存储

最近做RN开发中需要数据存储,查阅RN官方资料,发现推荐我们使用 AsyncStorage,对使用步骤做一下记录。 AsyncStorage是什么 简单的,异步的,持久化的key-value存储系统AsyncStorage在IOS下存储分为两种情况: 存储内容较…

MongoDB【无敌详细,建议收藏】

"探索MongoDB的无边之境:沉浸式数据库之旅" 欢迎来到MongoDB的精彩世界!在这个博客中,我们将带您进入一个充满创新和无限潜力的数据库领域。无论您是开发者、数据工程师还是技术爱好者,MongoDB都将为您带来一场令人心动…

【java实习评审】对推电影详情模块的基本电影模型设计到位,并能考虑到特色业务的设计

大家好,本篇文章分享一下【校招VIP】免费商业项目"推电影"第一期 电影详情模块 Java同学的开发文档周最佳作品。该同学来自暨南大学电子信息专业。 本项目的商业出发点: 豆瓣评分越来越水,不太符合年青人的需求,我们推…

【雕爷学编程】Arduino动手做(12)---霍尔磁场传感器模块2

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&#x…

【Hystrix技术指南】(5)Command创建和执行实现

创建流程 构建HystrixCommand或者HystrixObservableCommand对象 *使用Hystrix的第一步是创建一个HystrixCommand或者HystrixObservableCommand对象来表示你需要发给依赖服务的请求。 若只期望依赖服务每次返回单一的回应,按如下方式构造一个HystrixCommand即可&a…

在R中将列表(list)转换为向量(vector)

问题:将列表中的所有元素“展平”,赋值给一个向量 解决方案:使用unlist()函数; 在许多情况下需要向量,例如,baseR中的许多统计函数需要一个向量作为输入,例如,如果iq.score是一个包…

淘宝商品价格查询接口 批量获取商品详情页数据 支持高并发(含调用实例)

接口开发背景 淘宝商品价格查询可以帮助消费者了解和比较不同商品的价格,从而能够作出更明智的购买决策。通过价格查询,消费者可以找到最具性价比的商品,避免被高价或低价的商品误导。此外,价格查询还可以帮助消费者了解市场行情…

JS dom元素和鼠标位置之间的一系列属性快速参考

clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clie…

Sql奇技淫巧之EXIST实现分层过滤

在这样一个场景,我 left join 了很多张表,用这些表的不同列来过滤,看起来非常合理 但是出现的问题是 left join 其中一张或多张表出现了笛卡尔积,且无法消除 FUNCTION fun_get_xxx_helper(v_param_1 VARCHAR2,v_param_2 VARCHAR2…

shell脚本条件测试语句,if,case

shell脚本条件测试语句,if,case 一.条件测试1.1test命令1.2文件测试1.2.1文件测试常见选项 1.3数值比较1.4字符串比较1.5逻辑测试 二.if语句2.1单分支结构2.3多分支 三.case语句 一.条件测试 1.1test命令 测试特定的表达式是否成立,当条件成…

Http常见状态码

一、状态码大类 状态码分类说明1xx响应中——临时状态码,表示请求已经接受,告诉客户端应该继续请求或者如果它已经完成则忽略它2xx成功——表示请求已经被成功接收,处理已完成3xx重定向——重定向到其它地方:它让客户端再发起一个…

BGP基础实验建邻+宣告实验

实验题目如下: 实验拓扑如下: 实验要求如下: 【1】除R5的5.5.5.0环回外,其他所有的环回均可互相访问 实验思路如下: (1)合理的IP配置 (2)合理的BGP配置 (…

LeetCode 518. 零钱兑换 II(动态规划 完全背包)

题目&#xff1a; 链接&#xff1a;LeetCode 518. 零钱兑换 II 难度&#xff1a;中等 动态规划&#xff1a; dp[i][j] 定义&#xff1a;可选前 i 种硬币的情况下&#xff0c;组成金额 j 的组合数。 初始状态&#xff1a; dp[0][j] 0, 1 < j < amount&#xff08;不选…

SQL | 计算字段

7-创建计算字段 7.1-计算字段 存储在数据库中的数据一般不是我们所需要的字段格式&#xff0c; 需要公司名称&#xff0c;同时也需要公司地址&#xff0c;但是这两个数据存储在不同的列中。 省&#xff0c;市&#xff0c;县和邮政编码存储在不同的列中&#xff0c;但是当我们…

工厂老化设备维护的重要性及如何维护老化设备?

工业领域的老化设备问题日益凸显&#xff0c;对于保持生产稳定和效率至关重要。本文将探讨工厂老化设备维护的重要性&#xff0c;并介绍如何通过PreMaint设备数字化平台实现对老化设备的高效维护&#xff0c;从而确保工厂持续高效运转。 一、工厂老化设备的重要性 随着时间的推…

基于Python爬虫+词云图+情感分析对某东上完美日记的用户评论分析

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…