vue3中使用jsx的實(shí)現(xiàn)步驟

更新時(shí)間：2023年07月06日 11:23:12 作者：jieyucx

本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、使用vue-cli創(chuàng)建的項(xiàng)目中使用jsx語法

安裝Vue 3：使用Vue CLI創(chuàng)建一個(gè)新項(xiàng)目或通過npm安裝Vue。

配置Vue JSX插件：在創(chuàng)建的項(xiàng)目中，找到 babel.config.js 文件，添加以下插件配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 添加以下配置
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

創(chuàng)建基于JSX的組件：在 src 文件夾中創(chuàng)建一個(gè)新的 .jsx 文件，例如 MyComponent.jsx。

// 定義組件
export default {
  name: 'MyComponent',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  render() {
    return (
      <div>
        <h1>{this.msg}</h1>
      </div>
    )
  }
}

導(dǎo)入和使用組件：在其他組件中導(dǎo)入并使用自定義的基于JSX的組件。

<template>
  <div>
    <my-component msg="Hello Vue 3 JSX" />
  </div>
</template>
<script>
import MyComponent from './MyComponent.jsx'
export default {
  components: {
    MyComponent
  }
}
</script>

二、在vite創(chuàng)建的vue3項(xiàng)目中使用jsx

安裝插件

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

配置vite.config.js

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()],
})

新建App.jsx組件

import { defineComponent } from "vue";
export default defineComponent({
    name: "App",
    setup() {
        return () => <div>App</div>
    }
})

在main.js中導(dǎo)入使用

import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')

運(yùn)行項(xiàng)目

這樣就可以在Vue 3中使用JSX了

到此這篇關(guān)于vue3中使用jsx的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue3使用jsx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
jsx

相關(guān)文章

ESLint在Vue3?+?TypeScript中的配置與使用方法
在Vue項(xiàng)目中配置ESLint,可以確保代碼風(fēng)格的一致性和代碼質(zhì)量,這篇文章主要介紹了ESLint在Vue3+TypeScript中配置與使用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-12-12
Vue.js組件使用開發(fā)實(shí)例教程
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實(shí)例教程的相關(guān)資料,需要的朋友可以參考下
2016-11-11
vue3圖片放大鏡效果實(shí)現(xiàn)的完整教程
在Vue中實(shí)現(xiàn)放大鏡效果,主要是為了增強(qiáng)用戶體驗(yàn),讓用戶在查看商品圖片時(shí)能更清晰地觀察細(xì)節(jié),這篇文章主要介紹了vue3圖片放大鏡效果實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-11-11
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-02-02
vue中定時(shí)器setInterval的使用及說明
這篇文章主要介紹了vue中定時(shí)器setInterval的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)
這篇文章主要介紹了vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue-video-player視頻播放器使用配置詳解
這篇文章主要為大家詳細(xì)介紹了vue-video-player視頻播放器的使用和配置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue項(xiàng)目常用組件和框架結(jié)構(gòu)介紹
這篇文章通過圖文形式給大家介紹了vue項(xiàng)目的骨架及常用組件的相關(guān)知識(shí)，對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。
2017-12-12
uniapp和webview之間的通信舉例詳解
在uniapp中與webview的通信是一個(gè)常見且重要的功能,這篇文章主要介紹了uniapp和webview之間通信的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-06-06
Vue的緩存方法示例詳解
這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03