vue3使用@vitejs/plugin-vue-jsx来满足jsx

本文主要是介绍vue3使用@vitejs/plugin-vue-jsx来满足jsx，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3使用@vitejs/plugin-vue-jsx来满足jsx
jsx在vue3的使用语法
jsx在vue2种使用

1、安装插件@vitejs/plugin-vue-jsx

npm install --save-dev @vitejs/plugin-vue-jsx

2、在 vite.config.js 中添加插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({plugins: [vue(),vueJsx()]
})

3、使用jsx

<script lang="jsx">export default {name: "EquipmentDefect",setup() {obj： {title: '测试', field: 'ceshi',width: 200,formatter: (row, column) => {// console.log(112,row, column); // 直接{row}或{column} 不会显示内容return  [<el-tag type={row.ceshi == "可发放" ? "success" : "danger"} onClick={() => editItem(row, 'view')}> {row.ceshi} </el-tag>, <span>{column.label}</span>]}},},</script>

这篇关于vue3使用@vitejs/plugin-vue-jsx来满足jsx的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---