@vitejs-plugin-vue-jsx

参考链接：

• Vue-JSX

为什么使用JSX?

• 其实JSX的效果和我们在vue的template中写的代码效果是一样的。最终都会被渲染成createElement。
• 区别是template的标签是不可变的，我们要实现动态标签，只能使用v-if。而 JSX 的最大特点就是灵活，我们可以随意组装HTML代码。

假如我们要实现一个组件渲染<hn></hn>标签，n是我们传入的参数。如果用template，那么我们要写6个v-if。但是如果使用JSX，我们就可以直接将n放到标签中去。

引入组件

安装：

yarn add @vitejs/plugin-vue-jsx --dev

vue-jsx插件不用配置，可以直接放进去。

build\plugin\index.ts：

// ...
import vueJsx from '@vitejs/plugin-vue-jsx';
// ...
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  const vitePlugins: (Plugin | Plugin[])[] = [vue(),vueJsx()];
  // ...
  return vitePlugins;
}