在现有的项目中集成JSX

在vue3新版的脚手架中，已经内置了jsx的支持，但是如果你是在现有的项目中集成vue3的jsx，那么就需要手动安装插件来支持jsx语法了。

1. 安装依赖

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

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

// UserMessage.tsx
export default function UserMessage(props: { message: string, time?: string }) {
  const { message, time = Date.now() } = props
  return (
    <div>
      <p>{message}</p>
      <p>{time}</p>
    </div>
  )
}

在其他组件中使用：

<!-- app.vue -->
<script setup lang="ts">
import UserMessage from './UserMessage'
</script>

<template>
  <UserMessage message="Hello World" />
</template>