在Vue3添加Jsx支持

2021-08-25 1,165 阅读1分钟

安装插件 `@vitejs/plugin-vue-jsx`

//我尝试了最新的1.1.7版本好像会出问题，我安装的1.1.2版本就没事
$ npm i @vitejs/plugin-vue-jsx -D

在 `vite.config.ts` 中注册插件

import vueJsx from "@vitejs/plugin-vue-jsx"; 
export default { 
    plugins: [vue(), vueJsx()], 
}

使用

<script lang="jsx">
import { ref } from "vue";
export default {
  setup(){
    let counter = ref(10)
    const onclick = ()=>{
      counter.value++
    }
    
    return () =>(
      <>
       <p>jsx组件{counter.value}</p>
       <p onclick={onclick}>点击 +1 </p>
      </>
    )
  }
};
</script>