vue3+tsx

1.安装jsx插件

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

2.插件配置（vite.config.ts）

        在vite.config.ts文件中配置jsx，配置如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue(),
    vueJsx()，
  ],
});

3.使用

        1.在tsx文件中没有template模板样式以及style样式

                代码如下：

import { defineComponent } from 'vue';

export default defineComponent({
setup(){
  return ()=>(
    <div class="ersd">
    <h1 class="abc">我是一级路由首页</h1>
  </div>
    )
}
})


#在vue页面中使用该tsx文件
<template>
    <test/>
</template>
<script lang="ts" setup>
import test from './test'
</script>

        2.在.vue文件中书写tsx代码

                代码如下：

<script lang="tsx" >
import { defineComponent } from 'vue';

export default defineComponent({
setup(){
  return ()=>(
    <div class="ersd">
    <h1 class="abc">我是一级路由首页</h1>
  </div>
    )
}
})

</script>
<style scoped lang="scss">
.ersd {
  width: 100%;
  background: green;
}
.abc{
  color:red;
}
</style>

此时，代码的样式也可生效。 

        3.在tsx中return代码注意事项以及vue代码差别

        1.注意事项

        reuturn单节点可直接返回，如果多个节点，则需使用<></>将代码全部包裹起来。

        2.代码差别

        1.v-if  =》三目运算符

        vue代码

<template>
 <div>
  <div v-if='flag' >flag为true</div>
  <div v-else >flag为false</div>
 </div>
</template>

        tsx代码

return ()=>(
<div>
 {
    flag ? <div>flag为true</div> : <div>flag为false</div>
}
 </div>
)

        2.v-for  =>map循环方式

        vue代码

<template>
    <div v-for="item in items" :key="item.index">{{item.name}}</div>
</template>

        tsx代码

return () => (
  <>
    {
      items.map((item) => <div>{item}</div>
    }
  </>
)