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