vite项目中支持jsx语法

pnpm i @vitejs/plugin-vue-jsx

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
    plugins: [vueJsx()],
}); 

<template>
  <div class="app_"></div>
</template>

<script setup lang="jsx">
import { ref, onMounted, createApp, render } from 'vue'
import ai from './temp.vue'
onMounted(() => {
  let div = document.createElement('div')
  const ins = createApp({
    render() {
      return <ai title={132}></ai>
    },
  }).mount(div)
  document.querySelector('.app_').appendChild(div)
  console.log('ins.$el', ins.$el)
  return ins.$el
})
</script>

### 如何在 ViteVue3 项目中使用 JSX 为了使 ViteVue3 支持 JSX,在 `vite.config.ts` 中需要引入特定的插件来处理 JSX 文件。以下是详细的设置方法: #### 安装依赖包 首先,需安装必要的开发依赖项以支持 JSX 的编译和解析。 ```bash npm install @vitejs/plugin-vue-jsx --save-dev ``` 此命令会下载并保存 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 插件到项目的 devDependencies 下[^1]。 #### 修改 vite.config.ts 配置文件 接着更新 `vite.config.ts` 来加载新安装的插件。这一步骤确保了当构建工具遇到 `.jsx` 或者带有 JSX 语法糖的 `.vue` 组件时能够正确地进行转换工作。 ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; export default defineConfig({ plugins: [ vue(), vueJsx() // 启用对 .jsx 文件的支持以及允许在单文件组件内编写 JSX ], }); ``` 通过上述配置可以实现对 JSX 语法的良好兼容性,并且可以在 Vue 单文件组件 (SFC) 内部直接书写 JSX 表达式而无需额外配置 Babel 转换器或其他预处理器[^2]。 #### 编写 JSX 代码实例 一旦完成了以上两步操作之后就可以开始创建包含 JSX 结构的新组件或是修改现有组件为 JSX 形式了。下面给出一段简单的例子展示如何利用 JSX 创建一个按钮组件: ```tsx // src/components/Button.jsx import React, { useState } from 'react'; const Button = ({ onClick, children }) => { const [count, setCount] = useState(0); function handleClick(event) { event.preventDefault(); setCount(count + 1); if(onClick){ onClick(); } } return ( <button type="button" onClick={handleClick}> Clicked {children} times. </button> ); }; export default Button; ``` 请注意这里虽然导入的是来自 React 库中的 hooks 函数 (`useState`) ,但在实际应用中应该替换成本地逻辑或移除不必要的部分以便更贴合 Vue 生态环境下的需求。此外还需注意调整事件绑定方式使其符合 Vue 惯例[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值