在vue3+vite项目中使用jsx语法
如果我掏出下图,阁下除了私信我加入学习群,还能如何应对?

正文开始
- 前言
- 一、下载资源
- 二、利用vite工具引入babel插件
- 总结
前言
最近在为部署人员开发辅助部署的工具,技术栈是vue3+vite+electron,在使用jsx语法时,提示我需要引入插件,所以就找到了vue3+vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法,那么此篇文章对您无益。
一、下载资源
首先要下载我们需要的资源:
- 安装jsx支持插件:
npm install @vue/babel-plugin-jsx -D
- 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。
相关文章:
在vue3+vite项目中使用jsx语法
如果我掏出下图,阁下除了私信我加入学习群,还能如何应对? 正文开始 前言一、下载资源二、利用vite工具引入babel插件总结 前言 最近在为部署人员开发辅助部署的工具,技术栈是vue3viteelectron,在使用jsx语法时&#x…...
HCIA 路由器工作原理 及其 静态路由配置
目录 1、路由器工作原理 2、获取未知网段的方法: 3、静态路由 1)写法: 2)扩展配置 a、环回接口 配置命令: 环回接口的作用: b、手工汇总 手工汇总作用: c、路由黑洞 d、缺省路由 配置…...
【Git】—— git的配置
目录 (一)忽略特殊⽂件 (二)给命令配置别名 (一)忽略特殊⽂件 在⽇常开发中,我们有些⽂件不想或者不应该提交到远端,⽐如保存了数据库密码的配置⽂件,那怎么让Git知道呢…...
[git] git基础知识
git是一个免费的、开源的分布式版本控制系统,可以快速高效地处理从小型到大型的各种项目 git易于学习,性能极快 什么是版本控制? 版本控制是一种记录文件内容变化,以便将来查阅特定版本修订情况,可以记录文件修改历史…...
【从零学习python 】15.深入了解字符串及字符集编码
文章目录 字符集字符和编码相互转换编码规则 学习目标成员运算符in运算符not in 运算符 进阶案例 字符集 计算机只能处理数字(其实就是数字0和数字1),如果要处理文本,就必须先把文本转换为数字才能处理。最早的计算机在设计时采用8个比特(bi…...
【LeetCode】打家劫舍||
打家劫舍|| 题目描述算法分析编程代码 链接: 打家劫舍|| 在做这个题之前,建议大家做一下这个链接: 按摩师 我的博客里也有这个题的讲解,名字是按摩师 题目描述 算法分析 编程代码 class Solution { public:int maxrob(vector<int>nums,int left,…...
【Nginx】Nginx的重定向——location
location 匹配URI location 匹配的规则和优先级;***重点 nginx常用的变量;要求掌握 rewrite 重定向;掌握/理解 location匹配:*** 正则表达式:匹配的是文件内容 常见的正则表达式:…...
每日一题——滑动窗口的最大值
滑动窗口的最大值 题目链接 暴力解法 最容易想到的当然还是通过两层循环来暴力求解:一层循环用来移动窗口,一层循环用来在窗口内找到最大值。这种做法的时间复杂度为O(kN),会超出时间限制,因此,我们要找到更加高效的…...
【使用go开发区块链】之获取链上数据(03)
上篇文章,我们完成了数据库的连接,本章节,我们将完成ethclient的配置以及初始化 1、ethclient配置 1.1、安装go-ethereum 在命令行终端输入下面代码安装: go get github.com/ethereum/go-ethereum1.2、Ethclient配置 1.2.1、新…...
js 动态设置transformOrigin
transformOrigin属性用于指定元素变换的原点。 // 获取要设置的元素 const element document.getElementById(your-element-id);// 设置transformOrigin属性 element.style.transformOrigin 50% 50%; // 以元素中心为原点// 或者使用变量来设置 const x 0; // x坐标 const …...
docker使用tab无法自动补全命令
本文参考链接 一、安装bash-complete 在线安装 yum install -y bash-completion二、刷新文件 source /usr/share/bash-completion/completions/docker source /usr/share/bash-completion/bash_completion...
既然jmeter也能做接口自动化,为什么还需要pytest自己搭框架?
今天这篇文章呢,我会从以下几个方面来介绍: 1、首先介绍一下pytest框架 2、带大家安装Pytest框架 3、使用pytest框架时需要注意的点 4、pytest的运行方式 5、pytest框架中常用的插件 一、pytest框架介绍 pytest 是 python 的第三方单元测试框架&a…...
Objective-C获取变量类型的方法
在Objective-C中,要获取一个对象的类型,可以使用[object class]方法。这将返回一个Class对象,表示该对象的类型。 另外,typeid是C中的关键字,用于获取一个变量的类型信息。在Objective-C中,typeid并不适用于…...
相机可见区域,使用鼠标拖拽模型
知识点 向量射线检测坐标转换 思路 使用射线检测获取射线检测点与模型对象之间的偏移量 (世界空间)使用相机的坐标转换获取检测点与鼠标位置之间的偏移量 (屏幕空间)拖拽时,更新模型位置 代码示例 using UnityEng…...
Vue 2 与 Vue 3 的全面比较
Vue 2 与 Vue 3 的全面比较 1. 性能提升 Vue 3 的性能得到了显著提升。虚拟 DOM 已经重写,使补丁过程更快。 对比: Vue 3 使用了基于 Proxy 的新观察者机制,取代了 Vue 2 的基于 Object.defineProperty 的观察者。 Object.definePropert…...
Unity学习笔记--如何优雅简便地利用对象池生成游戏对象(进阶版)LRU + 对象池
前言 之前写过一篇关于对象池的文章,现在来看写的并不是很好,所以来考虑优化下。 现在来看一年前写的代码,越看越不能入目hhh Unity学习笔记–如何优雅简便地利用对象池生成游戏对象 前置知识 Unity学习笔记–使用 C# 开发一个 LRU 代码实…...
【Spring专题】Bean的声明周期流程图
前言 我向来不主张【通过源码】理解业务,因为每个人的能力有限,甚至可能会因为阅读错误导致出现理解上的偏差,所以我决定,还是先帮大家【开天眼】,先整体看看流程图,好知道,Spring在写源码的过…...
C++实现俄罗斯方块(源码+详解)
👂 Take me Hand Acoustic - Ccile Corbel - 单曲 - 网易云音乐 源码Debug工具 (1)cppreference.com (主) (2)必应 (bing.com) (3)GPT(主) &#…...
01:STM32点灯大师和蜂鸣器
目录 一:点亮1个LED 1:连接图 2:函数介绍 3:点灯代码 二:LED闪烁 1:函数介绍 2:闪烁代码 三:LED流水灯 1:连接图 2:函数介绍 3:流水灯代码 四:蜂鸣器 1:连接图 2:蜂鸣器代码 一:点亮1个LED 1:连接图 因为IO口与LED负极相连所以IO口输出低电频,点亮LED (采用的是低…...
linux pwn 基础知识
环境搭建 虚拟机安装 镜像下载网站为了避免环境问题建议 22.04 ,20.04,18.04,16.04 等常见版本 ubuntu 虚拟机环境各准备一份。注意定期更新快照以防意外。虚拟机建议硬盘 256 G 以上,内存也尽量大一些。硬盘大小只是上界&#…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
