Vite 使用TSX/JSX

安装
yarn add @vitejs/plugin-vue-jsx

or

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

配置
在 vite.config.ts 文件中挂载

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

tsconfig.json 文件中

{
// include 需要包含tsx
"include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts", "src/**/*.js"],
"compilerOptions": {
// 在.tsx文件里支持JSX
"jsx": "preserve",
}
}

使用
新建**.tsx
// index.tsx
export default definedComponents({
setup(props){
return ()=>(
<div>
Hello,World
</div>
)
}
})


新建**.vue
不需要template。script上加lang='tsx'

// index.vue
<script lang='tsx'>
import {definedComponents} from 'vue'
export default definedComponents({
setup(props){
return ()=>(
<div>
Hello,World
</div>
)
}
})
</script>

 

posted on   zyp_java_net  阅读(579)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器

导航

< 2025年2月 >
26 27 28 29 30 31 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 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示