1. 安装
npm install @vitejs/plugin-vue-jsx -D
2. 配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from "@vitejs/plugin-vue-jsx"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx()
],
resolve: {
alias: {
// 设置别名
'@': path.resolve(__dirname, './src'),
},
},
})
3. 修改tsconfig.json
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
4. 使用tsx
- 直接返回标签
export default function(){
return (<div>熏悟空</div>)
}
- 返回一个渲染函数
import {defineComponent} from "vue"
export default defineComponent({
data(){
return {
age:23
}
},
render(){
return (<div>{this.age}</div>)
}
})
- 使用setup方式
import {defineComponent} from "vue"
export default defineComponent({
setup(){
return () => {
return (<div>熏悟空</div>)
}
}
})
<template>
<div>
<xwk></xwk>
</div>
</template>
<script setup lang=ts>
import xwk from "@/App"
</script>
tsx 中取值使用{},可以使用v-show,不能使v-if, 使用ref不会解包需要.vaule