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,vue-jsx来满足jsx,vue3使用jsx)