一、配置和使用

@vitejs/plugin-vue-jsx文档地址
vite.config.js配置文件

import vueJsx from "@vitejs/plugin-vue-jsx";

    plugins: [
      vue(),
      //添加配置
      vueJsx()
    ]

test.jsx

const Baz = defineComponent({
  render() {
    return <button>点击</button>;
  }
});
export default Baz;

index.vue

import Baz from "./use_component.jsx";

<Baz />

二、jsx文件的另外一种写法

test.jsx文件，这里为了展示随便写了伪逻辑

function computed_component(row) {
  let a = 0;
  if (a == 0) {
    return <input></input>;
  } else {
    return <button>点击</button>;
  }
}

export default computed_component;

用法还是一样的

 <computed_component />
 
import computed_component from "./computed_component.jsx";

三、传递参数

test.jsx

export default function use_test() {
  function test_btn(props) {
    return <button>测试01---{props.a}</button>;
  }

  return { test_btn };
}

index.vue中

<test_btn  a="100" >

import use_test from "./test.jsx";

const { test_btn } = use_test();

博主开发了一个浏览器aweb123.com