一、使用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了
