uniapp怎么使用jsx

安装@vitejs/plugin-vue-jsx

npm install @vitejs/plugin-vue-jsx -D

vite.config.js配置

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    uni(),
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ],
});


使用方法,创建.jsx当组件使用。
JSXDemo1.jsx

export default {
  setup() {
    return () => <div>123456</div>;
  },
};

使用

<template>
	<jsxDemo1></jsxDemo1>
</template>
<script>
	import jsxDemo1 from './JSXDemo1.jsx'
	export default {
		components: {
			jsxDemo1
		},
		data() {
			return {

			}
		},
		methods: {},
	}
</script>

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/605451.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初始Java篇(JavaSE基础语法)(7)抽象类和接口(下)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaSE 接上文&#xff1a;初始Java篇&#xff08;JavaSE基础语法&#xff09;&#xff08;7&#xff09;抽象类和接口&#xff08;上&#xf…

Netty HTTP2 示例-响应式编程-013

🤗 ApiHug {Postman|Swagger|Api...} = 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱,有温度,有质量,有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace The Next Generation API Development Platform …

上海亚商投顾:沪指缩量调整 合成生物概念股持续爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日缩量震荡调整&#xff0c;深成指、创业板指均跌超1%。细胞免疫治疗概念股大涨&#xff0c;冠昊生物、…

运营一个在线课堂有哪些基础费用?

我是酷瓜云课堂的作者&#xff0c;对这个问题还是很有心得的。我们的系统是基于腾讯云服务的&#xff0c;下面简单罗列一些基础费用&#xff0c;价格和腾讯云官方有些许出入&#xff0c;仅供参考。 &#xff08;1&#xff09;域名 域名注册通常 60 - 80元 / 年&#xff0c;续…

【JavaEE网络】HTTP响应详解:状态码、报头与正文的全面解析

目录 HTTP响应&#xff08;Response&#xff09;认识 "状态码" (status code)认识响应 “报头”&#xff08;header&#xff09;认识响应 “正文”&#xff08;body&#xff09; HTTP响应&#xff08;Response&#xff09; 响应&#xff1a; 首行响应头空行正文 认…

AI大模型探索之路-训练篇18:大语言模型预训练-微调技术之Prompt Tuning

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…

信息系统项目管理师0095:项目管理知识领域(6项目管理概论—6.4价值驱动的项目管理知识体系—6.4.4项目管理知识领域)

点击查看专栏目录 文章目录 6.4.4项目管理知识领域6.4.4项目管理知识领域 除了过程组,过程还可以按知识领域进行分类。知识领域指按所需知识内容来定义的项目管理领域,并用其所含过程、实践、输入、输出、工具和技术进行描述。 虽然知识领域相互联系,但从项目管理的角度来看…

使用unplugin-icons报错:Icon `eos-icons/ai` not found

代码&#xff1a; import IconNanobert from ~icons/eos-icons/ai 报错&#xff1a; Icon eos-icons/ai not found解决办法&#xff1a; npm i -D iconify-json/eos-icons &#xff08;把eos-icons替换成报错的那个collection-id即可&#xff0c;collection-id名称见图2&…

JVM堆内存分析

jmap工具查看堆内存 jmap:全称JVM Memory Map 是一个可以输出所有内存中对象的工具&#xff0c;可以将JVM中的heap&#xff08;堆&#xff09;&#xff0c;以二进制输出成文本&#xff0c;打印出Java进程对应的内存 找到pid jmap -heap 19792 Attaching to process ID 19792…

鸿蒙DevEco Studio 4.1 Release-模拟器启动方式错误

软件版本&#xff1a;DevEco Studio 4.1 Release 报错提示&#xff1a; 没有权限查看处理指导 Size on Disk 显示1.0MB 尝试方案&#xff08;统统无效&#xff09;&#xff1a; 1、“windows虚拟机监控程序平台”、"虚拟机平台"已开启 启用CPU虚拟化 2、C…

如何使用过滤器和监听器

Filter&#xff1a;过滤器 Listener:监听器 Filter&#xff1a;过滤器 1. 概念&#xff1a;* 生活中的过滤器&#xff1a;净水器,空气净化器&#xff0c;土匪、* web中的过滤器&#xff1a;当访问服务器的资源时&#xff0c;过滤器可以将请求拦截下来&#xff0c;完成一些特…

蓝桥杯【第15届省赛】Python B组 32.60 分

F 题列表越界访问了……省一但没什么好名次 测评链接&#xff1a;https://www.dotcpp.com/oj/train/1120/ C 语言网真是 ** 测评&#xff0c;时间限制和考试的不一样&#xff0c;E 题给我整时间超限&#xff1f; A&#xff1a;穿越时空之门 100&#x1f3c6; 【问题描述】 随…

简要介绍三大脚本语言 Shell、Python 和 Lua

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 脚本语言是一种用于自动化操作系统任务和应用程序功能的编程语言。它们通常用于编写小到中等规模的程序&#xff0c;以提高任务执行的速度和效率。在众多脚本语言中&#xff0c;Shell、Python 和 Lua 是…

Python | Leetcode Python题解之第77题组合

题目&#xff1a; 题解&#xff1a; class Solution:def combine(self, n: int, k: int) -> List[List[int]]:ans []path []def dfs(x):remain k - len(path)if not remain:ans.append(list(path))returnif n 1 - x > remain:dfs(x 1)path.append(x)dfs(x 1)path.…

工业级路由器的穿透力是不是更强(原创科普)

今天我想和大家聊聊工业级路由器的一个重要特性——穿透力。作为一名从事工业网络通信的工程师,我发现很多用户在选择工业级路由器时,都会问到一个问题:"工业级路由器的穿透力是不是更强?"下面就让我来为大家解答这个疑问。当然如果有通信产品需要也可以关注星创易联…

09 - 数据清洗案例

流程图 kettle 面板图片 操作步骤 1、订阅数据源&#xff08;kafka consumer&#xff09; 2、抽取字段并转换key&#xff08;JSON input&#xff09; 3、判断img字段是否有值&#xff0c;有的话进行url转base64&#xff08;JavaScript 代码&#xff09; // 获取输入字段的值 v…

中金:如何把握不断轮动的资产“风口”

从比特币到日股&#xff0c;到黄金与铜再到当前的港股&#xff0c;每次超预期大涨后都透支回调。 今年以来资产的“风口”不断轮动&#xff0c;从比特币到日股&#xff0c;到黄金与铜&#xff0c;再到当前的港股&#xff0c;资产仿佛“接力”般交替领先&#xff0c;同时“风口”…

JavaScript 垃圾回收机制深度解析:内存管理的艺术

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3ad; 引言一、JavaScript内存模型与生命周期的深度解析&#x1f4cc; 基本数据类型与栈内存的精妙运作&#x1f4cc; 复杂数据类型与堆内存的广袤世界&#x1f4cc; 生命周期管理的智慧与实践策略&#x1f4cc; We…

uniapp开发小程序使用vue的v-html解析富文本图片过大过宽显示超过屏幕解决办法

如果没有设置的话&#xff0c;就会导致图片溢出&#xff0c;过宽显示或者错位显示&#xff0c;显示效果非常的丑陋&#xff1a; 修改后显示的效果&#xff1a; 网上比较low的解决办法&#xff1a;网上各种解决方法核心思想就是在数据层把数据模板上的img数据加上style样式&…

嵌入式Linux学习第四天启动方式学习

嵌入式Linux学习第四天 今天学习I.MX6U 启动方式详解。I.MX6U有多种启动方式&#xff0c;可以从 SD/EMMC、NAND Flash、QSPI Flash等启动。 启动方式选择 BOOT 的处理过程是发生在 I.MX6U 芯片上电以后&#xff0c;芯片会根据 BOOT_MODE[1:0]的设置来选择 BOOT 方式。BOOT_M…