Vue3+Vite项目如何简单使用tsx

大宁宁吖

于 2025-07-31 18:25:39 发布

阅读量209

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_44594219/article/details/149811325

vue 专栏收录该内容

22 篇文章

订阅专栏

安装必要的依赖
```
npm install @vitejs/plugin-vue-jsx -D
```

在 vite.config.ts 中添加以下内容

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

在Vue页面使用

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return () => (
      <div>我使用tsx了，真开心</div>
    )
  }
})
</script>

运行效果如下