依赖管理：yarn

搭建项目

使用vite搭建用vue-ts为模板的项目

 yarn create vite my-vue-app --template vue-ts

安装jsx插件

 yarn add @vitejs/plugin-vue-jsx

配置vite

编辑vite.config.ts文件，使用vueJsx插件并配置两项参数：

transformOn: true 把 on: { click: xx } 转成 onClick: xxx

mergeProps: true 自动绑定 class / style / onXXX 到组件根元素

具体如下：

 import vueJsx from '@vitejs/plugin-vue-jsx'
 ​
 export default {
   plugins: [
     vueJsx({
       transformOn: true,
       mergeProps: true
     }),
   ],
 }

使用tsx

将App.vue改为App.tsx

用setup形式写一个tsx组件,实现“+1”操作

 import { defineComponent, ref, withModifiers } from 'vue'
 export const App = defineComponent({
     setup() {
         const count = ref(0);
         const inc = () => {
             count.value++;
         };
         return () => (
             <div onClick={()=>{inc()}}>{count.value}</div>
         );
     },
 });

因为是命名导出，所以main文件引入app组件时需要解构

 import { App } from './App'

运行

 yarn dev