vue3中使用jsx的實現步驟
更新時間：2023年07月06日 11:23:12 作者：jieyucx
本文主要介紹了vue3中使用jsx的實現步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、使用vue-cli創(chuàng)建的項目中使用jsx語法
安裝Vue 3：使用Vue CLI創(chuàng)建一個新項目或通過npm安裝Vue。
配置Vue JSX插件：在創(chuàng)建的項目中，找到 babel.config.js 文件，添加以下插件配置：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 添加以下配置
plugins: [
'@vue/babel-plugin-jsx'
]
}創(chuàng)建基于JSX的組件：在 src 文件夾中創(chuàng)建一個新的 .jsx 文件，例如 MyComponent.jsx。
// 定義組件
export default {
name: 'MyComponent',
props: {
msg: {
type: String,
required: true
}
},
render() {
return (
<div>
<h1>{this.msg}</h1>
</div>
)
}
}導入和使用組件：在其他組件中導入并使用自定義的基于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項目中使用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中導入使用
import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')運行項目
這樣就可以在Vue 3中使用JSX了
到此這篇關于vue3中使用jsx的實現步驟的文章就介紹到這了,更多相關vue3使用jsx內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
element-ui動態(tài)級聯選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時候肯定會遇到這樣一個問題,就是在你使用級聯選擇器的回顯問題,下面這篇文章主要給大家介紹了關于element-ui動態(tài)級聯選擇器回顯問題的相關資料,需要的朋友可以參考下2023-03-03
defineProps?是?Vue?3?Composition?API?中用來聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構和不解構,感興趣的可以了解下2025-02-02
原生 JavaScript 實現,模擬 Vue 3 的 v-model 功能,包括表單元素和組件支持,我們將逐步構建代碼,并提供使用示例,對vue v-model原理解析感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了如何利用vue-router實現二級菜單內容轉換,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文主要介紹了Element修改彈窗類組件的層級的實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現在越來越多的項目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項目的實現步驟，感興趣的可以了解一下2021-07-07
這篇文章主要為大家詳細為大家詳細介紹了Vuejs實現帶樣式的單文件組件的新方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本篇文章主要介紹了Vue2.0如何發(fā)布項目實戰(zhàn)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了實現vue圖片縮放方式-拖拽組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue使用prop可以渲染但是打印臺報錯的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11