vue2如何使用jsx语法

在Vue2中使用JSX语法需要使用到babel插件和Vue的JSX编译器。

1. 安装babel插件

首先需要安装babel插件@vue/babel-plugin-jsx，可以使用npm或yarn进行安装：

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

yarn add @vue/babel-plugin-jsx --dev

2. 配置babel

在项目的.babelrc或babel.config.js文件中添加@vue/babel-plugin-jsx插件，如下所示：

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

3. 创建JSX组件

在Vue组件中使用JSX语法需要先引入Vue的JSX编译器，然后通过render方法返回JSX模板，如下所示：

import Vue from 'vue'
import { createVNode } from '@vue/composition-api'

// 引入Vue的JSX编译器
Vue.config.compilerAdapter = createRenderer({
  createElement: createVNode,
})

export default {
  name: 'MyComponent',
  render() {
    // 使用JSX模板
    return <div>Hello, World!</div>
  }
}

注意：在Vue2中使用JSX语法需要同时使用Composition API，并且需要自己手动创建Vue实例的虚拟节点。