vite Vue3使用JSX

如何在 Vite 和 Vue3 项目中使用 JSX
为了使 Vite 和 Vue3 支持 JSX，在 vite.config.ts 中需要引入特定的插件来处理 JSX 文件。以下是详细的设置方法：
安装依赖包
首先，需安装必要的开发依赖项以支持 JSX 的编译和解析。
npm install @vitejs/plugin-vue-jsx --save-dev
登录后复制
此命令会下载并保存 @vitejs/plugin-vue-jsx 插件到项目的 devDependencies 下[^1]。
修改 vite.config.ts 配置文件
接着更新 vite.config.ts 来加载新安装的插件。这一步骤确保了当构建工具遇到 .jsx 或者带有 JSX 语法糖的 .vue 组件时能够正确地进行转换工作。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
plugins: [
vue(),
vueJsx() // 启用对 .jsx 文件的支持以及允许在单文件组件内编写 JSX
],
});
登录后复制
通过上述配置可以实现对 JSX 语法的良好兼容性，并且可以在 Vue 单文件组件 (SFC) 内部直接书写 JSX 表达式而无需额外配置 Babel 转换器或其他预处理器[^2]。
编写 JSX 代码实例
一旦完成了以上两步操作之后就可以开始创建包含 JSX 结构的新组件或是修改现有组件为 JSX 形式了。下面给出一段简单的例子展示如何利用 JSX 创建一个按钮组件：
// src/components/Button.jsx
import React, { useState } from 'react';

const Button = ({ onClick, children }) => {
const [count, setCount] = useState(0);

function handleClick(event) {
event.preventDefault();
setCount(count + 1);
if(onClick){
onClick();
}
}

return (
<button type="button" onClick={handleClick}>
Clicked {children} times.
</button>
);
};

export default Button;
登录后复制
请注意这里虽然导入的是来自 React 库中的 hooks 函数 (useState) ，但在实际应用中应该替换成本地逻辑或移除不必要的部分以便更贴合 Vue 生态环境下的需求。此外还需注意调整事件绑定方式使其符合 Vue 惯例[^3]。