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

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

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。

标签： JSX, vite, vue3, xml

上面是“关于vue3中JSX的使用方法介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2847.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！