vue3+vite如何使用jsx

背景：

    JSX是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。
    熟悉React的前端开发一定非常了解JSX的使用，但在Vue3中能使用JSX吗？答案是肯定的，下面我们来具体实践下如何在Vue3+vite项目中实现JSX。

实现

1.vite 官方提供了相应的插件来支持在 Vue3 中使用 jsx/tsx，@vitejs/plugin-vue-jsx。

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

2.在vite.config.ts中，对JSX插件进行配置。

import vueJsx from '@vitejs/plugin-vue-jsx'
export default ({ mode, command }: { mode: any, command:any }) => {
    return defineConfig({
        plugins: [
            vueJsx(),
        ]
    })
}

3.使用，此时文件的语言要改为tsx或jsx才可以。

<script lang='tsx' setup>
const foo = (isShow：boolean) => {
  return (
    <div>
      <span>{ 张三 }</span>
      { isShow && (
        <span>{ 李四 }</span>
      )}
    </div>
  )
}
</script>

总结

    经过上述操作，就可以在Vue3+vite项目中使用JSX了，本人在项目中使用JSX主要用于在表格中展示一些定制化的样式，例如在表格columnData参数的formatter函数中使用。如您在阅读或实践过程中，发现本文有不正确的地方，请及时提出宝贵意见。