vue3中使用jsx的實(shí)現(xiàn)步驟
更新時間：2023年07月06日 11:23:12 作者：jieyucx
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、使用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>
)
}
}導(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項目中使用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)行項目
這樣就可以在Vue 3中使用JSX了
到此這篇關(guān)于vue3中使用jsx的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue3使用jsx內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 做移動端微信公眾號采坑經(jīng)驗記錄,文中是小編記錄的三個坑及解決方案，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue在項目中使用百度地圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
element-ui動態(tài)添加表單項并實(shí)現(xiàn)事件觸發(fā)驗證代碼示例
這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)添加表單項并實(shí)現(xiàn)事件觸發(fā)驗證的相關(guān)資料,其實(shí)就是利用了vue的v-for循環(huán)渲染,通過添加數(shù)組實(shí)現(xiàn)動態(tài)添加表單項,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue項目引入PWA的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
虛擬列表用來解決大數(shù)據(jù)量數(shù)據(jù)渲染問題,由于一次性渲染性能低,所以誕生了虛擬列表渲染,下面我們就來學(xué)習(xí)一下不同場景下Vue中虛擬列表是如何實(shí)現(xiàn)的吧2023-10-10
vue3項目打包成apk(android)詳細(xì)圖文教程
Vue本身是一個構(gòu)建用戶界面的漸進(jìn)式框架,不能直接打包成APK文件,但是你可以使用工具將Vue應(yīng)用打包成一個可以在Android設(shè)備上安裝的APK文件,這篇文章主要給大家介紹了關(guān)于vue3項目打包成apk(android)的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue3項目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因為3.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vue初始化動畫加載的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)移動端彈出鍵盤功能(防止頁面fixed布局錯亂)
這篇文章主要介紹了vue?解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題,通過實(shí)例代碼給大家分享解決方案，對vue?移動端彈出鍵盤相關(guān)知識感興趣的朋友一起看看吧2022-04-04
Vue中axios的封裝（報錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示）
這篇文章主要介紹了Vue中axios的封裝（報錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08