官方文档让我们配置
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