简单记录一下如何配置及使用JSX

安装

yarn add @vitejs/plugin-vue-jsx

或者

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

配置

在 vite.config.ts 文件配置

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

export default defineConfig({
  plugins: [
    vueJsx(), // 使用jsx插件
  ]
}）

tsconfig.json 文件中

{
  "compilerOptions": {
    "jsx": "preserve", //
  },
 "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.jsx", //加入jsx
    "src/**/*.vue"
  ],
}

新建 xxx.jsx 文件

import { defineComponent } from "vue";
export default defineComponent({
  props: {
    name: {
      type: String,
    },
  },
  setup(props) {
    const render = () => {
      //JSX语法不能直接插值语法 需要引用变量的时候使用{}包裹变量即可
      return <div> Hello {props.name}</div>;
    };
    return render;
  },
});

在vue文件中使用

<template>
  <div>
    <Hello-jsx :name='"JSX"'></Hello-jsx>
  </div>
</template>

<script setup lang="ts">
import HelloJsx from "./componets/hello.jsx";
</script>

<style scoped></style>