装置

yarn add @vitejs/plugin-vue-jsx

or

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

配置

在 vite.config.ts 文件中挂载

import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({ plugins: [ vueJsx()]})

tsconfig.json 文件中

{  // include 须要蕴含tsx"include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts", "src/**/*.js"], "compilerOptions": {    // 在.tsx文件里反对JSX    "jsx": "preserve", }}

应用

新建**.tsx

// index.tsxexport default definedComponents({  setup(props){    return ()=>(      <div>      Hello,World      </div>    )  }})

新建**.vue

不须要template。script上加lang='tsx'

// index.vue<script lang='tsx'>import {definedComponents} from 'vue'export default definedComponents({  setup(props){    return ()=>(      <div>      Hello,World      </div>    )  }})</script>

文档

jsx语法Seehttps://github.com/vuejs/jsx-...

探坑

jsx/tsx中循环进去的标签元素上有点击事件的话 会主动调用事件

// 例如export default definedComponents({  import {definedComponents} from 'vue'  setup(props){    // 会被调用3次    const click = (val)=>{      consloe.log(val)      // 112      // 112      // 112    }    return ()=>(      <>      {[1,2,3].map((item,index)=>{        return (          // 而且 这样写拿不到原生事件 event          <div onClick={click('112')}><>        )      })}      </>    )  }})

正确应该是 onClick={(e)=>{click(e,'112')}} 这样也能够拿到原生事件

// jsx/tsx中循环进去的标签元素上有点击事件的话 会主动调用事件// 例如export default definedComponents({  setup(props){    // 只有点击时执行    const click = (e,val)=>{      consloe.log(e,val)    }    return ()=>(      <>      {[1,2,3].map((item,index)=>{        return (          <div onClick={(e)=>{click(e,'112')}}><>        )      })}      </>    )  }})

jsx中 应用 transition

import {Transition,ref} from 'vue'export default definedComponents({  setup(props){    // 只有点击时执行    const a = ref(false)    return ()=>(      <>        <Transition>        <div v-show={a}></div>      </Transition>    )  }})