vue3使用@vitejs/plugin-vue-jsx来满足jsx

在Vue 3中使用Vite配合@vitejs/plugin-vue-jsx可以让你在Vue项目中使用JSX。以下是如何配置的步骤：

1. 确保你已经安装了Vite和Vue。
2. 安装@vitejs/plugin-vue-jsx：

npm install @vitejs/plugin-vue-jsx

3. 在Vite配置文件中（通常是vite.config.js或vite.config.ts），引入defineConfig和plugin-vue-jsx，并配置插件：

// vite.config.js
import { defineConfig } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
 
export default defineConfig({
  plugins: [vueJsx()],
  // 其他配置...
});

4. 在.vue文件中使用JSX：

// MyComponent.vue
<script lang="jsx">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
 
    return () => (
      <div>
        <p>Count: {count.value}</p>
        <button onClick={() => count.value++}>Increment</button>
      </div>
    );
  },
});
</script>

确保你的.vue文件中的<script>标签上设置了lang="jsx"，这样Vite就知道该如何处理这个脚本标签内的代码。