Vue3中使用jsx语法

1. 准备环境

无论你是使用vite构建项目还是使用vue-cli构建项目都可以，这里顺嘴插一句，因为vue官方已经不推荐我们使用vue-cli来构建项目，所以大家尽量使用vite来构建项目，那么使用npm,pnpm,yarn都是可以的。找到想要创建项目的地方，使用以下命令（个人习惯使用pnpm,因为npm会出现幻影依赖的问题）

pnpm create vue

会出现下面的界面，按自己需求勾选相应的项目即可，

这里选择安装jsx支持，会自动为你安装@vitejs/plugin-vue-jsx插件
2. 项目创建好以后，我们还需要配置一下babel,在项目根目录创建一个babel.config.js文件，随后安装依赖@vue/babel-plugin-jsx

pnpm add -D @vue/babel-plugin-jsx

安装好之后，在babel.config.js中导出如下内容

module.exports = {
    plugins: ['@vue/babel-plugin-jsx'],
};

到此依赖安装完成
3.书写jsx语法代码
我们在App.vue文件书写以下内容

<script lang="jsx">

export default {
    setup() {
        return () => <h1>Hello World</h1>;
    },
};
</script>

或者这样写

<script>

import { h } from 'vue';
export default {
    setup() {
        return () => h('h1', 'Hello World');
    },
};

</script>

切记不要使用setup语法糖写法，目前不可行，因为没有返回值。
然后运行项目，即可看到效果。