安装
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语法See
https://github.com/vuejs/jsx-next#babel-plugin-jsx-for-vue-30
探坑
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>
)
}
})