Vue Academy · 课时

使用 Vite 在 Vue 3 中编写 JSX

Q: 「使用 Vite 在 Vue 3 中编写 JSX」这节课中我会学到什么？

@vitejs/plugin-vue-jsx、JSX 编译指令、函数式组件，以及 JSX 与模板的权衡 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

@vitejs/plugin-vue-jsx、JSX 编译指令、函数式组件，以及 JSX 与模板的权衡

使用 Vite 在 Vue 3 中编写 JSX 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

Vue 3 中的 JSX

JSX 让您可以在 JavaScript 中编写类似标记的语法，编译后会变成 h 调用。Vue 3 通过接入 Vite 的专用 Babel 插件支持 JSX。

安装插件

官方软件包是 @vitejs/plugin-vue-jsx。请将它与常规 Vue 插件一起安装为开发依赖。

npm install -D @vitejs/plugin-vue-jsx

配置 vite.config.ts

将 vueJsx() 添加到 vite.config.ts 中的 plugins 数组。必须列出该插件，Vite 才会转换 JSX 文件。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

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

.tsx 文件扩展名

使用 JSX 编写的组件使用 .tsx（或 .jsx）扩展名。该插件只处理使用这些扩展名的文件。

// Greeting.tsx
export default () => <div>Hello</div>;

函数式组件

最简单的组件是一个返回 JSX 元素的箭头函数。类名和文本的写法与 HTML 中一样。

const Comp = () => <div class="box">text</div>;

export default Comp;

使用 class，而不是 className

与 React 不同，Vue JSX 使用 class，而不是 className。标签上的 for 也是如此。

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

动态值

请将表达式嵌入花括号中。在渲染主体内，使用 .value 读取响应式引用。

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

使用 camelCase 编写事件处理器

监听器使用 camelCase 形式的 on 前缀：onClick、onInput、onMouseenter。处理器是一个函数。

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

条件渲染

JSX 没有 v-if。请使用三元表达式或逻辑表达式来有条件地生成元素。

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

渲染列表

使用 map 替代 v-for。与模板中一样，请为每个元素提供 key。

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

使用 defineComponent 定义属性

如果需要带类型的属性和生命周期，请将逻辑包装在 defineComponent 中。setup 函数会返回一个返回 JSX 的渲染函数。

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

快速检查

哪个插件可以在 Vue 3 Vite 项目中启用 JSX？它应添加到哪里？

回顾

将 @vitejs/plugin-vue-jsx 提供的 vueJsx() 添加到 Vite 插件数组，即可启用 Vue 3 JSX，并在 .tsx 文件中编写组件。请使用 class 而不是 className，使用 camelCase 形式的 onClick 处理器，并在需要带类型的属性时使用 defineComponent。

常见问题解答

「使用 Vite 在 Vue 3 中编写 JSX」课时是免费的吗？

是的 — 「使用 Vite 在 Vue 3 中编写 JSX」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 Vite 在 Vue 3 中编写 JSX」这节课中我会学到什么？

@vitejs/plugin-vue-jsx、JSX 编译指令、函数式组件，以及 JSX 与模板的权衡你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Vite 在 Vue 3 中编写 JSX」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy