1. jsx的babel配置

1.1 在項目中使用jsx，需要添加對jsx的支持：

• jsx通常會通過Babel來進行轉換(React編寫的jsx就是通過babel轉換的)
• Vue中，只需要在Babel中配置對應的插件即可
• 以下列舉需要支持轉換的案例：

    template -> vue-loaderrender -> 不需要轉換jsx -> babel(es6 -> es5、ts -> js、jsx -> js) -> render
  

2. vue-cli中安裝jsx插件及配置

2.1. 安裝babel支持Vue的jsx插件(vue-cli)：

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

2.2. 在babel.config.js配置文件中配置插件："@vue/babel-plugin-jsx"

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

3. Vite環境中安裝jSX插件及配置：

3.1. 安裝jSX插件：

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

3.2. 在vite.config.js配置文件中配置插件：@vitejs/plugin-vue-jsx

   import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// 導入jsx插件import jsx from '@vitejs/plugin-vue-jsx'import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/export default defineConfig({plugins: [vue(),// 添加jsx插件jsx(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},})

3.3. 使用jsx語法

• 3.3.1. Options API中使用

  • script標簽中配置lang=“jsx”
  • render函數中return jsx語法
  • 具體代碼如下；

    <script lang="jsx">import About from './About.vue'export default {data  () {return {count: 0}},render () {return (<div class='app'>{/* 只要使用js語法，統一使用大括號 */}<h2>當前計數：{ this.count }</h2><button onClick={this.increment}> +1 </button><button onClick={this.decrement}> -1 </button><p>我是內容，哈哈哈哈</p>{/* 使用組件 */}<About /></div>)},methods: {increment () {this.count++},decrement () {this.count--}}}
    </script><style lang="less" scoped></style>

• 3.3.2. compositionApi的實現方式

  • 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>
  

  • setup語法糖中使用
    • 定義jsx函數

      <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 class='app'><h2>當前計數 ：{ counter.value } </h2><button onClick={ increment }>+1</button><button onClick={ decrement }>-1</button><About /></div>)
      </script>
      

    • 在template中使用jsx標簽進行渲染

        <template><jsx /></template>