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>
相关推荐
wocwin3 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
留白声5 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
zy0101017 天前
JSX入门
前端·css·react.js·html·jsx
dr李四维8 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
Jiaberrr12 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神14 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
柒@宝儿姐15 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
爱看书的小沐16 天前
【小沐学Web3D】three.js 加载三维模型(vue3)
javascript·vue·vue3·webgl·three.js·opengl·web3d
山闻愚20 天前
创建Electron35 + vue3 + electron-builder项目,有很过坑,记录过程
vue3·electron35
谈谈叭21 天前
代码优化——基于element-plus封装组件:表单封装
开发语言·前端·javascript·性能优化·vue3·vite·element-plus