# @ant-design-vue/babel-plugin-jsx 中文文档规范地址：https://npmcn.com/package/%40ant-design-vue/babel-plugin-jsx/ 版本：1\.0\.0-rc\.1 npm 元数据更新时间：2023-05-31T01:46:20.467Z 中文译文更新时间：2026-11-06T06:03:07.090Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40ant-design-vue/babel-plugin-jsx 原文对照：https://npmcn.com/package/%40ant-design-vue/babel-plugin-jsx/?lang=original 项目主页：https://github.com/vueComponent/jsx/tree/master/packages/babel-plugin-jsx#readme 源码仓库：https://github.com/vueComponent/jsx ## 关键信息（来自 npm 元数据） - 包体积（解压后）：40.1 kB，10 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：8 个 - 首次发布：2020-05-24T12:58:54.807Z - 最新版本发布：2020-07-29T04:47:50.920Z - 近 30 天下载量：9197（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：12（近 12 个月 0 个） ## 中文简介 Vue 3.0 JSX 的 Babel 插件 ## 安装 ```sh npm install @ant-design-vue/babel-plugin-jsx ``` 也可以使用：`pnpm add @ant-design-vue/babel-plugin-jsx`、`yarn add @ant-design-vue/babel-plugin-jsx`、`bun add @ant-design-vue/babel-plugin-jsx` ## README # Vue 3.0 的 Babel 插件 JSX ![test](https://github.com/vueComponent/jsx/workflows/test/badge.svg) [![npm package](https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx) 加入Vue JSX支持. 页:1 [简体中文](https://npmcn.com/packages/babel-plugin-jsx/README-zh_CN.md) ## 安装安装插件 : ```bash npm install @ant-design-vue/babel-plugin-jsx -D ``` 然后将插件添加到.babelrc: ```js { "plugins": ["@ant-design-vue/babel-plugin-jsx"] } ``` ## 使用量 ### 选项 #### 打开类型 : `boolean` 默认 : `false` 转换 `on: { click: xx }` 改为 `onClick: xxx` #### 优化类型 : `boolean` 默认 : `false` 允许优化与否。如果你对Vue 3不熟悉,不推荐启用. #### 海关元素类型 : `(tag: string) => boolean` 默认 : `undefined` 配置自定义元素 ## 语法 ### 内容职能构成部分 ```jsx const App = () =>

; ``` 已生效 ```jsx const App = { render() { return

; } }; ``` ```jsx const App = defineComponent(() => { const count = ref(0); const inc = () => { count.value++; }; return () => (

{count.value}

); }); ``` ```jsx import { withModifiers } from 'vue'; const App = () => { const count = ref(0); const inc = () => { count.value++; }; return () => (

{count.value}

); } ``` 断裂 ```jsx const App = () => ( <> I'm Fragment ); ``` ### 属性/ 道具 ```jsx const App = () => ; ``` 带有动态绑定的: ```jsx const placeholderText = 'email'; const App = () => ( ); ``` ### 指令 v 显示 ```jsx const App = { data() { return { visible: true }; }, render() { return ; }, }; ``` v 型号 > 注意: 您应该通过第二个参数作为字符串来使用 `arg`。。。 . ```jsx ``` ```jsx ``` ```jsx ``` 将汇编到: ```js h(A, { 'foo': val, "fooModifiers": { "bar": true }, "onUpdate:foo": $event => val = $event }) ``` 自定义指令 ```jsx const App = { directives: { custom: customDirective }, setup() { return () => ( ); }, }; ``` ### 槽 ```jsx const App = { setup() { const slots = { default: () =>

, foo: () => B }; return () => ; } }; ``` ## 谁在用

蚂蚁设计Vue

范特语