vue3中使用jsx的实现步骤
作者：jieyucx
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、使用vue-cli创建的项目中使用jsx语法
安装Vue 3：使用Vue CLI创建一个新项目或通过npm安装Vue。
配置Vue JSX插件：在创建的项目中，找到 babel.config.js 文件，添加以下插件配置：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 添加以下配置
plugins: [
'@vue/babel-plugin-jsx'
]
}创建基于JSX的组件：在 src 文件夹中创建一个新的 .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创建的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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！