关于vue.js:Vite-使用TSXJSX

装置

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.tsx
export 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>
    )
  }
})