1. 安装

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

2. 配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from "@vitejs/plugin-vue-jsx"// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueJsx()],resolve: {alias: {// 设置别名'@': path.resolve(__dirname, './src'),},},
})

3. 修改tsconfig.json

    "jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",

4. 使用tsx

• 直接返回标签

export default function(){return (<div>熏悟空</div>)
}

• 返回一个渲染函数

import {defineComponent} from "vue"export default defineComponent({data(){return {age:23}},render(){return (<div>{this.age}</div>)}
})

• 使用setup方式

import {defineComponent} from "vue"export default defineComponent({setup(){return () => {return (<div>熏悟空</div>)}}
})

<template><div><xwk></xwk></div>
</template><script setup lang=ts>
import xwk from "@/App"
</script>

tsx 中取值使用{},可以使用v-show,不能使v-if, 使用ref不会解包需要.vaule