vue3 中直接使用 JSX （ lang=“tsx“ 的用法）

1. 安装依赖

npm i @vitejs/plugin-vue-jsx

2. 添加配置

vite.config.ts 中

import vueJsx from '@vitejs/plugin-vue-jsx'

plugins 中添加

vueJsx()

3. 页面使用

<!-- 注意  lang  的值为  tsx -->
<script setup lang="tsx">
const isDark = ref(false)

// 此处使用了 JSX
const Sunny = () => <div class="i-bx:sun w-1em h-1em"></div>
const Moon = () => <div class="i-bx:moon w-1em h-1em"></div>
</script>

<template>
  <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny"> </el-switch>
</template>