本文更新于2021-08-03 基于vite 2.4.4&vue 3.1.5,除了装个插件，不需要额外配置即可使用。不太适合template还没有上手的好兄弟萌。适合对vue3.0有一点了解的HXD

安装 or 配置 在 vite.config.ts 文件中挂载 tsconfig.json 文件中 使用 新建**.tsx 新建**.vue 不需要template。script上加lang='tsx

关于本文异常热闹的评论区，我在https://juejin.cn/post/6911883414110994439进行统一回应，后面没什么必要我不会直接在评论区进行回应，如果之前的回应有一些过激的语言我表示抱歉，因为太长时间没有发文有点没控制住。 以防万一有的同学实在不看官方文…

使用 Vue3 + Typescript + JSX 开发组件的同学，还在为了类型声明而烦恼吗？快进来试试这个开源库！

本篇我们将实现Mini播放器。应该是最后一篇。整篇下来其实没什么技术难点，技术太浅且毫无新意。赶紧结束掉吧。React Native开发实在。就像上篇所说，快速且无成本切换框架是我们使用JSX的理由，同时扩展我们的思路、仅此而已。 完整Mini和全屏播放器功能。如: 特效、拖动…

这是关于Vue3使用tsx开发尝试的一些我注意到的点。 函数组件（FC），无状态，与 react 基本一致。 不过对于 React 方向的开发者来说，本来就没有具名插槽这个概念，具名插槽的类似功能也可以通过 props 的方式传入（Vue x JSX的情况下也本人推荐这种用法）。

到这一步，一个Vue3+TSX的项目就搭建起来了，以上配置文件的具体内容就不做解释了。 因为默认项目模板是以src/main.js为入口的，我们需要把它修改为src/main.ts。 这里创建router的方式与之前不同，在vue3中，结合TS的类型推断，开发效率会高很多。 v…

然后在 tsconfig.json 中配置 jsxFactory 为我们封装的这个函数就可以了。但是这个函数限制了我们在为组件传递 slots 时只能： 但是这也没啥问题嘛。 有了 JSXFactory 工具函数之后其实我们可以很开心的用 tsx 写了，那为啥还要 jsx 插件…

Vite + Vue 3 + Typescript + tsx + less + router + vuex + elementplus 教程示范demo