vue3+ts 集成tsx写法

很多组件库都使用了TSX的方式开发，主要因为其灵活性比较高。 这篇文章主要将如何进行整合。
一起玩转 Vue 中的 JSX：让你一次性掌握它的特性!

集成步骤

• 安装依赖

npm install @vitejs/plugin-vue-jsx -D

• 修改 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';


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

• 修改tsconfig.json 配置文件

"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",

新增上面三个配置信息

使用教程

• 定义组件,假设在components文件下创建一个Test.tsx文件

//vue3 + ts 推荐的compomition API写法
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    return ()=>(<div>我是组件1</div>)
  }
})

//函数式组件
// export default ()=><div>我是组件</div>

更多关于组件写法的规则。请查阅相关资料。 这里不赘述。

• 在页面中使用

<template>
    <div>
        <Test></Test>
    </div>
</template>

<script setup lang="ts">
import { watch, ref, onMounted, toRef,reactive } from 'vue';
import Test from "@/components/Test"

</script>
<style lang="less"  scoped >
</style>

• 页面效果