Vue3+Vite5项目使用Jsx

这篇笔记主要记录Vue3+Vite5项目使用Jsx

1. 安装@vitejs/plugin-vue-jsx包
2. vite.config.ts plugin里添加vueJsx()
3. 组件里使用如果是setup要加lang="jsx"或lang="tsx"

今天在项目中碰到naive-ui的Data Table组件，有一个字段IS_PASSTRAIN后台返回的是0或1，前端需要显示成是或否，不想转数据，于是在显示的时候根据0和1渲染不同的值

<script setup lang="ts">
 const columns = [
    { title: '是否完成培训', key: 'IS_PASSTRAIN', align: 'center',
     render(row) {
        return <div>{ row['IS_PASSTRAIN'] == 1 ? '是' : '否'  }</div>
     }
    }
  ]
</script>
<template>
<n-data-table
  :bordered="false"
  :sigle-column="true"
  :bottom-bordered="false"
  :columns="columns"
  :data="data"
/>
</template>

上面代码里有render返回html标签，用到了jsx.

安装@vitejs/plugin-vue-jsx包

pnpm i -D @vitejs/plugin-vue-jsx, 执行安装命令

  "devDependencies": {
    "@vitejs/plugin-vue-jsx": "^4.0.0",
    }

vite.config.ts plugin里添加vueJsx()

在vite.config.ts文件defineConfig的plugin里添加vueJsx

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

组件里使用如果是setup要加lang="jsx"或lang="tsx"

组件里使用, 我的是setup, 要加lang="tsx" 不然没法解析那个jsx语法。

<script setup lang="tsx">
 const columns = [
    { title: '是否完成培训', key: 'IS_PASSTRAIN', align: 'center',
     render(row) {
        return <div>{ row['IS_PASSTRAIN'] == 1 ? '是' : '否'  }</div>
     }
    }
  ]
</script>
<template>
<n-data-table
  :bordered="false"
  :sigle-column="true"
  :bottom-bordered="false"
  :columns="columns"
  :data="data"
/>
</template>

跟第一段代码比起来，只是把lang="ts"改成了lang="tsx"，这样就能显示想要的是或否