程序员鸡皮

文章 分类 评论
76 3 11

站点介绍

一名PHP全栈程序员的日常......

Vue3中的jsx的babel配置

abzzp 2024-08-31 529 0条评论 前端 vue

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客,欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

  • 如果我们希望在项目中使用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>

感谢大家观看,我们下次见

评论(0)

最新评论

  • React中函数组件如何实现? - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

    [...]export default App 这就是React中用函数的方式实现页面的展示,看得出来React又向函数式编程的开发方式迈进。是否能够成为主流这还要看市场,另外React中的Hook也是函数式编程的体现。后面我们也会写到。如果你还对类组件感兴趣,可以看这一篇文章: React中类组件如何实现?感谢大家观看,我们下次再见。[...]

  • React组件生命周期函数 - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

    [...]}从上面可以看出,在React中我们使用this.setState来修改变量的值。在这里我们要注意this的指向问题,如果有不懂可以看:函数中的this指向componentDidMountcomponentDidMount是表示组件已被渲染到dom中,被挂载到DOM上,这里就不得不提一下在React中如何引入组件相关的内容了。那么如何引入组件呢?在React中非常简单import HelloWo[...]

  • See details

    of course like your web site but you need to test the spelling on quite a few of your posts. A number of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I will surely come again again.

  • 晚夜

    新年快乐!

  • abzzp

    十天看一部剧,还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行,谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升,每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了,报错了吗?[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业,我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会,献血还给学分~

日历

2025年03月

      1
2345678
9101112131415
16171819202122
23242526272829
3031     

文章目录

推荐关键字: React vue JavaScript Golang 观后感 ES6 SEO 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客,欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案