第四十五章-Vite插件-@vitejs-plugin-vue-jsx

1.说明

参考链接：

• @vitejs/plugin-vue-jsx的npm首页
• Vue-JSX
• Vue- JSX 中的用法
• Vue-setup中使用JSX
• Vue-模板语法

为什么使用JSX?

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

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

2.引入组件

安装：

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

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

build\vite\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;
}

上一章

第四十四章-Vite插件-@vitejs-plugin-vue

下一章

第四十六章-Vite插件-@vitejs-plugin-legacy