• 如果我們希望在項目中使用jsx，那么我們需要添加對jsx的支持：

1. jsx我們通常會通過Babel來進行轉換（React編寫的jsx就是通過babel轉換的）；
2. 對于Vue來說，我們只需要在Babel中配置對應的插件即可；

** webpack 中安裝**

• 安裝Babel支持Vue的jsx插件：

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

在babel.config.js配置文件中配置插件：

module.exports = {presets:['@vue/cli-plugin-babel/preset'],plugins:["@vue/babel-plugin-jsx"]
}

Vite環境
如果是Vite環境，需要安裝插件：

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

在vite.config.js配置文件中配置插件：

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import jsx from '@vitejs/plugin-vue-jsx'  // 引入// https://vitejs.dev/config/
export default defineConfig({plugins: [jsx()  // 使用],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

使用案例

基本使用

<script lang="jsx">export default {render() {return (<div class="app"><h2>我是標題</h2><p>我是內容, 哈哈哈</p></div>)}}
</script><style lang="less" scoped></style>

Options-Api中

<script lang="jsx">import About from './About.vue'export default {data(){return {counter:0}},render(){return (<div class="app"><h2>當前計數：{this.counter}</h2><button onClick={this.increment}>+1</button><button onClick={this.decrement}>-1</button><About /></div>)},methods:{increment(){this.counter++},decrement(){this.counter--}}}
</script><style lang="less" scoped></style>

Compitions-Api中

<template><jsx />
</template>  <script lang="jsx" setup>import { ref } from 'vue'import About from "./About.vue"const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--;}const jsx = () => (<div><h2>當前計數：{ counter.value }</h2><button onClick={increment}> +1 </button><button onClick={decrement}> -1 </button><About /></div> )
</script><style lang="less" scoped></style>

setup函數中使用

<script lang="jsx">import { ref } from 'vue'import About from './About.vue'export default {setup(){const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--}return () => (<div class="app"><h2>當前計數：{ counter.value }</h2>  <button onClick={increment}>+1</button><button onClick={decrement}>-1</button><About /></div>)}}
</script>
<style lang="less" scoped></style>

** 感謝大家觀看,我們下次見 **