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>
相关推荐
sen_shan4 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙5 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z5 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程
Edward-tan7 天前
【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复
vue3·全栈·django5
sen_shan14 天前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
Samdy_Chan15 天前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
USER_A00115 天前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
sen_shan19 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
qq_3085623121 天前
vue3 中引入tinymce富文本
vue3·富文本·tinymce
sen_shan23 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus