vue3配置jsx

首先按照官方文档创建项目：

代码语言：javascript复制

npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue

然后我们安装jsx插件：https://github.com/vuejs/babel-plugin-jsx

代码语言：javascript复制

npm install @vue/babel-plugin-jsx -D

然后配置vite.config.js

代码语言：javascript复制

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuejsx from "@vue/babel-plugin-jsx"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vuejsx({})],
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  }
})

编写代码：

代码语言：javascript复制

<script lang="tsx">
interface Props {
  msg: string;
}
import { ref, Ref, } from 'vue'
export default {
  props: {
    msg: {
      type: String
    }
  },
  setup(props: Props, { expose }) {
    const count: Ref<number> = ref(0)
    const increment = (event: MouseEvent) =>   count.value
    expose({
      increment
    })
    return () => (
      <div>
        <div>{props.msg}</div>
        <p>You clicked {count.value} times</p>
        <button onClick={increment}>Click me</button>
      </div>
    )
  }
}
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

查看效果：

react

0 人点赞