vue3 中直接使用 JSX ( lang=“tsx“ 的用法)

1. 安装依赖

c 复制代码
npm i @vitejs/plugin-vue-jsx

2. 添加配置

vite.config.ts 中

ts 复制代码
import vueJsx from '@vitejs/plugin-vue-jsx'

plugins 中添加

ts 复制代码
vueJsx()

3. 页面使用

html 复制代码
<!-- 注意  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>
相关推荐
Jinuss1 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
叫我阿柒啊2 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊2 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊3 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊3 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊3 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊4 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊4 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare5 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊5 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack