Vue3中使用tsx文件

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