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>
相关推荐
上单带刀不带妹12 小时前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
千码君20162 天前
React Native:使用vite创建react项目并熟悉react语法
javascript·css·react native·react.js·html·vite·jsx
雪山上的小灰熊2 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
路光.6 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
Wiktok15 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok16 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok16 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手17 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok18 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss18 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3