学习本章节之前可以查阅一下 JSX基本语法及使用 这篇文章，学习一下JSX的基本使用

vue3使用TSX配置

安装依赖

yarn add @vitejs/plugin-vue-jsx

vite.config.ts配置

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

export default defineConfig({
    plugins: [
      /* ... */
      vueJsx()
    ]
})

tsconfig.json配置

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

配置完成后就可以使用 .tsx 文件来书写我们的vue组件了

使用

新建一个 App.tsx文件

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const name = '小张'

    return () => (
      <div>{name}</div>
    )
  }
})

页面上引用,可以省略.tsx后缀

<template>
  <div>
    <AppTSX></AppTSX>
  </div>
</template>

<script setup lang="ts">
import AppTSX from './App'

</script>

<style scoped>

</style>

可以看到页面正常显示出来了

大家可以点赞关注一下噢！下一章节我会写一篇怎么使用TSX编写组件以及使用TSX编写组件的多种方式