vue3+vite使用jsx

在Vue3中使用JSX，你需要在Vite项目中安装`@vitejs/plugin-vue-jsx`插件。可以通过以下两种方式安装该插件：

1. 使用npm安装：

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

2. 使用yarn安装：

   yarn add -D @vitejs/plugin-vue-jsx

安装完成后，在`vite.config.js`文件中进行配置，添加`vueJsx`插件，并导出一个Vite配置对象。示例代码如下：

import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [vueJsx(), /* 其他插件 */],
  // 其他配置项
})

配置完成后，你就可以在Vue组件中使用JSX编写代码了。以下是一个使用JSX的Vue3组件的示例代码：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const str = ref<string>('tsx的使用');

    const clickFunc1 = () => {
      console.log('没有参数');
    }
    
    const clickFunc2 = (msg: string = '默认值') => {
      console.log(msg);
      console.log(props);
    }

    return () => (
      <>
        <div class="async">{str.value}</div>
        <button onClick={clickFunc1}>不传参数点击</button>
        <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
      </>
    );
  }
});

请注意，以上示例中使用了`defineComponent`来定义Vue组件，并使用`setup`函数来设置组件的逻辑。在`setup`函数中，可以使用`ref`来定义响应式数据，以及定义其他函数和变量。最后，使用箭头函数返回一个渲染函数来渲染组件的JSX模板。

希望以上信息能够帮助到你！