vue3.X 结合vite 使用JSX 语法遇到坑

官网

1. vue3.x Vue.js - 渐进式 JavaScript 框架 | Vue.js

2. vite Vite | Next Generation Frontend Tooling

3.  element-plus 一个 Vue 3 UI 框架 | Element Plus

4.  JSX vite-plugin-vue/packages/plugin-vue-jsx at main · vitejs/vite-plugin-vue · GitHub

1. 在使用JSX之前需要引入 JSX 的包并引用

// 再导入之前 先导入 @vitejs/plugin-vue
pnpm i @vitejs/plugin-vue

// 在vite.config 中导入并配置 @vitejs/plugin-vue

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
} 

注意： 再导入 JSX 之前 vite 的版本必须在4.0.0之后

// 导入 '@vitejs/plugin-vue-jsx'
pnpm i @vitejs/plugin-vue-jsx
// 在vite.config 中导入并配置 @vitejs/plugin-vue-jsx

import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
}

2. 在vue中使用

这里需要注意 ： 使用 v-hasPermi 的时候，JSX会丢失这个属性的行为。 需要手动的 bind 下

v-hasPermi 属于非标准的写法，所以在使用的时候JSX会自动丢失掉。