基础模板

1
2
3
4
5
yarn create vite vite-tsx-demo --template vue-ts

cd vite-tsx-demo
yarn
yarn dev

引入sass

1
yarn add -D sass

引入jsx/tsx

1
yarn add -D @vitejs/plugin-vue-jsx

vite.config.ts

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 新增

export default defineConfig({
plugins: [
vue(),
vueJsx() // 新增
]
})

使用

简单组件 Demo.tsx

1
export const Demo = () => <h1>123</h1>

需要修改组件 tree.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { defineComponent, PropType, ExtractPropTypes } from 'vue'

interface TreeItem {
label: string
children?: TreeData
}
type TreeData = Array<TreeItem>

const treeProps = {
data: {
type: Array as PropType<TreeData>,
default: () => [],
}
}

type TreeProps = ExtractPropTypes<typeof treeProps>

export default defineComponent({
name: 'OTree',
props: treeProps,
setup(props: TreeProps) {
return () => {
return <div class="tree">
{props.data.map(item => <div>{item.label}</div>)}
</div>
}
}
})