官方文档让我们配置babel.config.js,如果我们使用vite快速搭建的项目,那么就很遗憾不行,要换一种配置


 1. yarn add '@vitejs/plugin-vue-jsx'
 2. 配置vite.config.ts

// vite.config.ts
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() // 添加这一句
 ]
})

然后再跑代码就ok了,下面是使用列子

// 一个组件
import { withModifiers, defineComponent, ref } from "vue";

const App = defineComponent({
  setup() {
    const count = ref(6);

    const inc = () => {
      count.value++
    };

    return () => (
      <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
    );
  },
});

export default App
Logo

前往低代码交流专区

更多推荐