vite+vue3中使用tsx语法

第一步：安装插件

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

第二步：修改vite.config.js,加入以下配置

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

export default defineConfig({
    plugins: [VueJsx()]
})

组件中使用(以helloword.tsx为例)

import { onMounted, watch, ref, computed, reactive, defineComponent } from 'vue';
import Child from './components/Child.tsx'

export default defineComponent({
    name: 'helloword',
    components: {
        Child
    },
    props: ['msg'],
    setup(props: any){
        const info: any = reactive({
            name: '1'
        })
        const fname = ref('张');
        const lname = ref('三');
        const num = ref(100)
        onMounted(() => {
            getData()
        })
        const changeNum = computed(() => {
            console.log(fname)
            return num * 2;
            // return fname.value + lname.value;
        })
        watch(() => info ,(now, old) => {
            console.log(now, old)
        },{deep: true, immediate: true})
        const getData = () => {
            console.log(info)
        }
        return () => (
            <>
                <div>{ props.msg }</div>
                <div>{{ changeNum }}</div>
            </>
        )
    }
})