关于vue3中JSX的使用方法介绍

发布时间：2025/01/15

JSX是JavaScript的一个类似XML的扩展，那么JSX如何在vue3中使用呢？下面编程教程网小编给大家详细介绍一下！

vue3+vite的项目不支持/code>jsx，如果想支持jsx，需要安装插件。

1、安装jsx脚手架

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

2、在vite.config.js中进行配置：

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

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

3、在vue中使用：

import { ref } from "vue";

export default {
  setup() {
    const count = ref(100);
    return () => <div>count is: {count.value}</div>;
  },
};

Ps：script中lang要改成jsx。

以上是编程学习网小编为您介绍的“关于vue3中JSX的使用方法介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。