vue3中使用jsx的实现步骤

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 添加以下配置
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

// 定义组件
export default {
  name: 'MyComponent',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  render() {
    return (
      <div>
        <h1>{this.msg}</h1>
      </div>
    )
  }
}

<template>
  <div>
    <my-component msg="Hello Vue 3 JSX" />
  </div>
</template>
<script>
import MyComponent from './MyComponent.jsx'
export default {
  components: {
    MyComponent
  }
}
</script>

npm i @vitejs/plugin-vue-jsx -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

import { defineComponent } from "vue";
export default defineComponent({
    name: "App",
    setup() {
        return () => <div>App</div>
    }
})

import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')