Vite使用TSX-JSX

安装yarnadd@vitejs/plugin-vue-jsxornpminstall@vitejs/plugin-vue-jsx-D在vi??te.config.ts文件中配置挂载importvueJsxfrom'@vitejs/plugin-vue-jsx'exportdefaultdefineConfig({plugins:[vueJsx()]})在tsconfig.json文件中{//include需要包含tsx"include":["src/*","src/**/*.vue","src/**/*.tsx","src/**/*.jsx","src/**/*.ts","src/**/*.js"],"compilerOptions":{//在.tsx文件中"jsx":"preserve",}}使用新的**.tsx//index.tsxexportdefaultdefinedComponents({setup(props){return()=>(

)}})新的**.vue不需要模板。添加lang='tsx'到脚本//index.vue文档jsx语法见https://github.com/vuejs/jsx-...循环出jsx/tsx如果label元素有点击事件，会自动调用该事件//例如exportdefaultdefinedComponents({import{definedComponents}from'vue'setup(props){//会被调用3次constclick=(val)=>{consloe.log(val)//112//112//112}return()=>(<>{[1,2,3].map((item,index)=>{return(//而且它不会起作用到原生事件event<>)})})}})正确的应该是onClick={(e)=>{click(e,'112')}}这样也可以获取到原生事件//如果jsx/tsx循环出来的label元素上有点击事件，会自动调用该事件//例如，exportdefaultdefinedComponents({setup(props){//仅在点击时执行constclick=(e,val)=>{consloe.log(e,val)}return()=>(<>{[1,2,3].map((item,index)=>{return({click(e,'112')}}><>)})})}})使用transitionimport{Transition,ref}from'vue'exportdefaultdefinedComponents({setup(props){//执行单击c时onsta=ref(false)return()=>(<>