>[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> ~~~