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 2022-09-01 16:46 zyp_java_net 阅读(579) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器