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

1.说明

参考链接:

为什么使用JSX?

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

假如我们要实现一个组件渲染<hn></hn>标签,n是我们传入的参数。如果用template,那么我们要写6v-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

# vben  vite 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×