【vue】在vue中使用jsx

安装

npm i @vitejs/plugin-vue-jsx -D

配置vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
 //引入
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  //使用
  plugins: [vue(), vueJsx()], 
  })

使用

创建test.tsx文件

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: "test",
  setup(props, ctx) {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const decrement = () => {
      count.value--;
    };

    return () => (
      <div>
        <h1>计数器: {count.value}</h1>
        <button onClick={increment}>增加</button>
        <button onClick={decrement}>减少</button>
      </div>
    );
  },
});

在App.vue引入使用

<script setup lang="ts">
//根据自己的路径导入
import test from './test'
</script>

<template>
 <test></test>
</template>

<style scoped>
</style>