vue3 安装JSX

Vue 3是一种流行的JavaScript框架，用于构建用户界面。它提供了一种声明式的方式来处理数据和DOM的交互。在Vue 3中，安装JSX需要进行以下步骤：

1. 首先，确保你已经安装了Node.js和npm（Node包管理器）。

2. 创建一个新的Vue项目。你可以使用Vue CLI（命令行界面）来创建一个基本的Vue项目。在终端中运行以下命令：

npm install -g @vue/cli
vue create my-project

这将创建一个名为`my-project`的新项目。

3. 进入项目目录：

cd my-project

4. 安装`@vue/babel-preset-jsx`插件。在终端中运行以下命令：

npm install @vue/babel-preset-jsx --save-dev

5. 在项目根目录下创建一个名为`.babelrc`的文件，并添加以下内容：

{
  "presets": ["@vue/babel-preset-jsx"]
}

6. 现在，你可以在Vue组件中使用JSX了。在`.vue`文件中，你可以使用`render`函数来编写JSX代码，例如：

<template>
  <div>
    <h1>Hello, Vue 3 with JSX!</h1>
    <button onClick={handleClick}>Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

这样，你就可以在Vue 3中使用JSX了。