vue3中使用jsx

一、使用vue-cli创建的项目中使用jsx语法

1. 安装Vue 3：使用Vue CLI创建一个新项目或通过npm安装Vue。

2. 配置Vue JSX插件：在创建的项目中，找到 babel.config.js 文件，添加以下插件配置：

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

3. 创建基于JSX的组件：在 src 文件夹中创建一个新的 .jsx 文件，例如 MyComponent.jsx。

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

4. 导入和使用组件：在其他组件中导入并使用自定义的基于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

1. 安装插件

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

2. 配置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()],
})

3. 新建App.jsx组件

import {
    
     defineComponent } from "vue";

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

})

4. 在main.js中导入使用

import {
    
     createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')

5. 运行项目
   

这样就可以在Vue 3中使用JSX了