基础模板

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

广告(云服务器)

阿里云活动
ECS共享型 n4 1核2G1M,1年79元,3年226。
ECS共享型 s6 2核4G1M,1年263元,3年621。
ECS共享型 s62核-8G-1M,3年859元。
点击查看详情(更多优惠)
腾讯云活动
新用户(老用户换QQ客享受)   云服务器 标准型S3 1核/2G/1M 95一年,   轻量 2核4G5M(限定) 3年只要688 点击查看详情(更多优惠)