Vue中使用jsx

1. jsx的babel配置

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

• jsx通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的)
• Vue中，只需要在Babel中配置对应的插件即可
• 以下列举需要支持转换的案例：

    template -> vue-loader
    render -> 不需要转换
    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>