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>

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

相关推荐

  1. uniapp怎么实现条形码

    2024-05-10 14:18:06       35 阅读
  2. uniapp小程序使用uQRCode.js生成二维码

    2024-05-10 14:18:06       35 阅读
  3. 在vue和uniapp使用 websocket并封装js

    2024-05-10 14:18:06       34 阅读
  4. uniapp组件和周期的知识点以及怎么使用

    2024-05-10 14:18:06       60 阅读
  5. uniapp页面怎么传参?

    2024-05-10 14:18:06       39 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-10 14:18:06       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-10 14:18:06       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-10 14:18:06       87 阅读
  4. Python语言-面向对象

    2024-05-10 14:18:06       96 阅读

热门阅读

  1. linux自用命令

    2024-05-10 14:18:06       26 阅读
  2. golang系统内置函数整理

    2024-05-10 14:18:06       32 阅读
  3. 学习Python第6天:函数与模块

    2024-05-10 14:18:06       27 阅读
  4. Linux 系统启动时设置一个全局环境变量

    2024-05-10 14:18:06       31 阅读
  5. STM32中usart使用DMA接受数据

    2024-05-10 14:18:06       29 阅读