如何在JSX/TSX中无需手动导入即可使用已全局注册的Vue组件？

以下方案均基于你已经完成VButton全局注册的前提，可实现JSX/TSX中无需手动导入组件直接使用：

方法1：直接使用kebab-case格式的组件标签（无额外依赖） #

Vue的JSX编译器会自动将kebab-case格式的非原生HTML标签识别为全局组件，运行时可直接生效，不需要导入组件：

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // 直接写kebab-case格式的全局组件名即可
    return () => <v-button>Click Me</v-button>
  },
})

注意：该写法默认仅运行时正常，TypeScript会报类型错误，可在项目的env.d.ts或global.d.ts类型声明文件中补充全局类型声明解决：

declare module 'vue' {
  export interface GlobalComponents {
    VButton: typeof import('@/components/VButton.vue')['default']
    // 其余全局组件可在此处依次补充
  }
}
export {}

补充后大驼峰、kebab-case格式的全局组件都会有正常的TS类型提示，不会报错。

方法2：通过unplugin-vue-components实现自动解析 #

如果不想手动维护类型声明，也不想用kebab-case写法，可以通过该插件自动识别全局组件，自动注入解析逻辑并生成类型声明：

1. 安装依赖
   npm i unplugin-vue-components -D
2. 配置vite.config.ts

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dts: true, // 自动生成components.d.ts类型声明文件
      // 可自行配置组件扫描目录、组件库解析器等规则
    }),
  ],
})

配置完成后即可直接在JSX/TSX中写<VButton />，无需手动导入，运行时和类型提示都正常。

方法3：手动调用resolveComponent解析（适合临时使用场景） #

如果不想修改项目配置，也可以调用Vue官方提供的resolveComponent方法手动获取全局组件，不需要导入组件本身：

import { defineComponent, resolveComponent } from 'vue'

export default defineComponent({
  setup() {
    // 传入全局注册的组件名即可解析到对应实例
    const VButton = resolveComponent('VButton')
    return () => <VButton>Click Me</VButton>
  },
})

内容的提问来源于stack exchange，提问作者Wenfang Du