vue3中使用jsx

在Vue 3中，引入了兼容React JSX语法的方式，使得开发者可以更方便地编写组件。Vue官方推荐使用`@vue/babel-plugin-jsx`这个插件来启用JSX支持。以下是使用jsx的基本步骤：

1. **安装依赖**：在项目中运行`npm install @vue/babel-plugin-jsx --save-dev` 或者 `yarn add @vue/babel-plugin-jsx -D` 来安装jsx插件。

2. **配置Babel**：在`.babelrc`或`babel.config.js`文件中添加以下配置，将jsx插件启用并设置其为全局转换模式：

{
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

3. **开始编写jsx**：现在你可以像在React中一样编写jsx元素了。例如，在模板字符串中插入jsx：

<template>
  <div>
    <HelloWorld name="John" />
  </div>
</template>

<script setup>
import { h } from 'vue';

function HelloWorld({ name }) {
  return <h1>Hello, {name}!</h1>;
}
</script>

4. **注意点**：
- `h` 函数来自 `@vue/runtime-dom`，而不是 `vue`本身，所以需要导入它。
- 使用 `v-bind` 替代 React 中的 `{...props}`，比如 `<div v-bind:class="{ active: isActive }">...</div>`。
- Vue3 的JSX不支持自闭合标签，如 `<img />`，需要用 `/>` 结束。