vite中使用jsx

于 2024-05-11 10:31:25 发布
阅读量340 收藏 8
点赞数 5
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LRQQHM/article/details/138704905
版权

vite.config.js配置

plugins: [
		vue(),
		vueJsx()
	],

.vue文件

<script setup lang='jsx'>
KAGHQ
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-plugin-react-jsx:一个Vite插件，增强了React的jsx转换
05-11
vite-plugin-react-jsx ... 这可能会受益于较小的包装束和即将进行的优化，但是也将在生产过程中使用。 （待办事项：测量可能会变慢多少。） 我正在考虑删除此选项，它可能会绊倒那些可能很少获得胜利的人。 ，可能
vue3中怎么巧妙的去运用jsx？
12-26
用于《vue3中怎么巧妙的去运用jsx？》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/135171661
《Vite 基础知识》Vue3 之 JSX 配置
前端技术
02-23 454
Vite Vue3 之 JSX 配置
如何在Vue3+Vite中使用JSX
热门推荐
忧郁的蛋的专栏
12-09 1万+
JSX（JavaScript 和 XML），是一个 HTML-in-JavaScript 的语法扩展，首先在 React 中被进入。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JS 共存。Click Me该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析 JSX 的。MyButton,)
vue3+vite项目中如何使用jsx语法
最新发布
qq_42931285的博客
02-27 943
vue3+vite项目中如何使用jsx语法
浅析：如何在Vue3+Vite中使用JSX
qq_38334677的博客
02-17 1478
JSX（JavaScript 和 XML）是一种语法扩展，它结合了 HTML 和 JavaScript 的功能。最初，它是在 React 中引入的，用于描述 UI 应该呈现出其交互本质的形式。由于 JSX 是在 JavaScript 语法上的扩展，因此类似于 HTML 的代码可以与 JavaScript 代码混合使用。Click Me该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析 JSX 的。MyButton,
vite构建自定义组件库，支持单文件组件，jsx组件
Johnny Liao的博客
04-04 2998
Vite名字来源于法语, 意思为quickly–“快速”。在整体功能上实现了类似于预配置的webpack加dev server的功能， 用于提高前端项目的整体构建速度。它采用了全新的unbundle思想来提升整体的前端开发体验。比起传统的webpack构建，在性能速度上都有了质的提高。
Vite 使用TSX/JSX
qq_45032714的博客
05-30 6413
安装 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":
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 ...
vite2-vue3-ts基础模板
04-29
包里面集成了基础vue3全家桶，包括vuex、...此模板包含vue3+ts+jsx的编写示范，以及ant-design的按需加载示范。 vite.config里面包含了调用api的代理配置。 初次使用需要准备node环境，并安装依赖包 npm i npm run dev
vite2.0+react17+mobx+antd带登录，tabs多开窗口的应用系统框架
03-21
1.采用vite搭建，支持图片压缩，兼容ie11，...6.带完整demo样列，支持jsx,tsx语法，样列中存在类写法以及hooks写法，适合各种开发者 7.该系统开箱即用，即适合初学者学习也适合开发者应用项目开发，后期会上线tsx的版本
在vue-cli中使用Vite Today-JavaScript开发
05-26
ToC使用动机选项基本原理兼容性vue-cli和vite里程碑之间的差异示例Vite Build支持疑难解答自定义样式缺少字体jsx支持require.context未定义Vue3支持相关Vite插件的用法vue add vite插件的生成器将编写一些main.html...
vite-plugin-vue2:Vite的Vue2插件
03-31
vite-plugin-vue2 用法 运行yarn add vite-plugin-vue2 --dev 将插件添加到vite.config.js // vite.config.js const { createVuePlugin } = require ( 'vite-plugin-vue2' ) module . exports = { plugins : [ ...
vue3-project-dodo:vue3 + ts + jsx + koa2 + vite2 + webpack5 + dev-ssr + prd-ssr + prd-csr
05-20
vue3-project-dodovue3 + ts + jsx + koa2 + vite + webpack5 + dev-ssr + prd-ssr + prd-csr节点> = 12.20.0（对于ECMAScript模块） 项目设置 yarn install运行开发 yarn dev用ssr进行开发 yarn dev:ssr量产 yarn ...
jsx-v-model-一个Babel插件，将v-model引入JSX。-Vue.js开发
05-27
用法：npm i babel-plugin-jsx-v-model -D然后在插件示例.babelrc下将jsx-v-model添加到您的.babelrc文件：{“ presets”：[“ es2015”]，“ plugins”：[“ jsx-v-model“，” transform-vue-jsx“]}代码：Vue....
(已解决) Vite中编译JSX时在后缀(.vue)单文件报错原因
qq_41308489的博客
11-17 7481
原因: 因为目前@vitejs/plugin-vue-jsx插件无法解析编译.vue后缀的文件 解决： 把.vue后缀文件更改为.jsx文件 就可以执行 App.jsx // 1. Vite在启动时会做依赖的预构建 // 2. 预构建，运行时默认都只会对jsx与tsx做语法转换。不会对js做jsx的语法转换。 // 目前vite不支持.vue单文件的jsx编译 export default { data() { return { counter: 0
vue3+vite使用jsx/tsx
温壁
12-29 3554
安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default defineConfig({ plugins: [vueJsx(), ...], ... }) 使用实战 新建xxx.tsx或者xxx.jsx，注意不
vue3 + vite 配置jsx
九段刀客的博客
07-04 3002
vue3 jsx
【jsx开发Vue】在Vite+Vue3.0中使用jsx语法开发。
WEB前端李志杰
01-12 9154
所有内容首发微信公众号【WEB前端李志杰】，未经允许禁止转载！ 可能大家要问我为什么要使用jsx语法开发Vue？ 首先要说明的是：个人认为jsx语法和模板语法并不存在优劣之分，在实际项目中应该优先选择开发人员所擅长的语法进行开发。 那么、接下来再说说在Vue开发中为什么要使用jsx语法？ 第一点、jsx语法可以更好地跟Typescript结合； 第二点、在阅读UI框架源码时，发现在知名UI组件库Ant Design Vue跟Naive UI皆使用tsx语法开发。 接下来大家可能又要问了tsx语法跟jsx又有
vue3+vite使用jsx
09-15
在Vue3中使用JSX，你需要在Vite项目中安装`@vitejs/plugin-vue-jsx`插件。可以通过以下两种方式安装该插件： 1. 使用npm安装： ``` npm install -D @vitejs/plugin-vue-jsx ``` 2. 使用yarn安装： ``` yarn add -D @vitejs/plugin-vue-jsx ``` 安装完成后，在`vite.config.js`文件中进行配置，添加`vueJsx`插件，并导出一个Vite配置对象。示例代码如下： ```javascript import vueJsx from '@vitejs/plugin-vue-jsx'; export default defineConfig({ plugins: [vueJsx(), /* 其他插件 */], // 其他配置项 }) ``` 配置完成后，你就可以在Vue组件中使用JSX编写代码了。以下是一个使用JSX的Vue3组件的示例代码： ```javascript import { defineComponent, ref } from 'vue'; export default defineComponent({ props: { params: { type: Object, default: () => {} } }, setup(props) { const str = ref<string>('tsx的使用'); const clickFunc1 = () => { console.log('没有参数'); } const clickFunc2 = (msg: string = '默认值') => { console.log(msg); console.log(props); } return () => ( <> <div class="async">{str.value}</div> <button onClick={clickFunc1}>不传参数点击</button> <button onClick={() => clickFunc2('额外参数')}>传参数点击</button> </> ); } }); ``` 请注意，以上示例中使用了`defineComponent`来定义Vue组件，并使用`setup`函数来设置组件的逻辑。在`setup`函数中，可以使用`ref`来定义响应式数据，以及定义其他函数和变量。最后，使用箭头函数返回一个渲染函数来渲染组件的JSX模板。 希望以上信息能够帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值