>[success] # jsx 1. 希望在项目中使用jsx，那么我们需要添加对jsx的支持 * jsx我们通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的） * 对于Vue来说，我们只需要在Babel中配置对应的插件即可 2. 安装 `jsx` Babel 插件 * `npm install @vue/babel-plugin-jsx -D` * 如果你是vite 环境 `npm install @vitejs/plugin-vue-jsx -D` 3. 配置`jsx` * 在`babel.config.js`配置文件中配置插件  * 使用vite 的话在` vite.config.js` 配置 ~~~ import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), vueJsx()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }) ~~~ >[info] ## 综合案例 ~~~ <script lang="jsx"> export default { render() { return ( <div class="app"> <h2>我是标题</h2> <p>我是内容, 哈哈哈</p> </div> ) } } </script> ~~~ * 使用变量时候使用 `{}` 包裹 ~~~ <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> ~~~