Vite 使用TSX/JSX

安装

yarn add @vitejs/plugin-vue-jsx

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>

文档

jsx语法Seehttps://github.com/vuejs/jsx-next#babel-plugin-jsx-for-vue-30

探坑

`jsx/tsx`中循环出来的标签元素上有点击事件的话会自动调用事件

// 例如
export default definedComponents({import {definedComponents} from 'vue'setup(props){// 会被调用3次const click = (val)=>{consloe.log(val)// 112// 112// 112}return ()=>(<>{[1,2,3].map((item,index)=>{return (// 而且 这样写拿不到原生事件 event<div onClick={click('112')}><>)})}</>)}
})

正确应该是onClick={(e)=>{click(e,'112')}}这样也可以拿到原生事件

// jsx/tsx中循环出来的标签元素上有点击事件的话 会自动调用事件
// 例如
export default definedComponents({setup(props){// 只有点击时执行const click = (e,val)=>{consloe.log(e,val)}return ()=>(<>{[1,2,3].map((item,index)=>{return (<div onClick={(e)=>{click(e,'112')}}><>)})}</>)}
})

jsx中使用 transition

import {Transition,ref} from 'vue'
export default definedComponents({setup(props){// 只有点击时执行const a = ref(false)return ()=>(<><Transition><div v-show={a}></div></Transition>)}
})

Vite 使用TSX/JSX相关推荐

手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题
今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错: 原代码如下: 查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题, ...
vue3 + vite + ts + setup , 第七练 TSX的使用
在Vue2 中我们可以使用jsx 但是好像不是很友好,也很少用,vue3对typescript的支持度,tsx写法越来越被接受,那么我们也了解一下TSX如何使用,学习学习一.安装配置 1.安装插件p ...
Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具. ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 1.建议 vsc ...
【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
文章目录一.完整构建流程 1.在指定目录下执行 pnpm init,初始化 package.json 2.执行 pnpm install vite -D,安装 vite. 3.package.jso ...
Vite Server 是如何处理页面资源的？
我们知道,Vite 在开发环境下,会打开一个 Dev Server 用于预览开发的页面,那么这个 Dev Server 到底做了什么呢?它是怎么做到将我们的代码展示成页面的,接下来我们就来一探究竟. ...
vue3+vite+jest配置单元测试总结
一.配置从0接触单元测试,真的是安装环境,运行demo就折磨了好久,主要是各种版本库的依赖关系,所以安装的时候一定一定要注意安装对应的版本: 我的版本情况 vue@3.2.2 vite@2.5.0 ...
【前端工程化】深入浅出vite（二）--vue3全家桶+ts构建后管系统
安装基础包 npm create vite@latest # 这里选择的是Vue+Typescript的组合 cd vue-admin npm install# 先安装基础包 npm install ...
一个基于vue3+vite+ts的完整项目
VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 vue3 ...
什么是Vite：现代和超快速项目工具指南---下一代前端工具
Vite 是一款用于脚手架和捆绑项目的现代.超快速工具,由于近乎即时的代码编译和快速的热模块更换,它迅速变得流行起来.在本文中,您将了解Vite是什么以及如何使用它来构建新项目,等等. 今天创建新项目 ...
Webpack 打包太慢？来试试 Bundleless
简介:Webpack 将各个资源打包整合在一起形成 bundle,当资源越来越多时,打包的过程也将越来越慢.如果我们不需要打包呢?让浏览器直接加载对应的资源,是否就可以实现质的提升?本文分享基于浏览器 ...

Vite 使用TSX/JSX

安装

配置

使用

新建**.tsx

新建**.vue

文档

探坑

`jsx/tsx`中循环出来的标签元素上有点击事件的话会自动调用事件

jsx中使用 transition

Vite 使用TSX/JSX相关推荐

最新文章

热门文章

Vite 使用TSX/JSX

安装

配置

使用

新建**.tsx

新建**.vue

文档

探坑

jsx/tsx中循环出来的标签元素上有点击事件的话 会自动调用事件

jsx中 使用 transition

Vite 使用TSX/JSX相关推荐

最新文章

热门文章

`jsx/tsx`中循环出来的标签元素上有点击事件的话会自动调用事件

jsx中使用 transition