基础模板

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>
    }
  }
})