vue3+TS声明全局组件并获取代码提示

在平时的vue开发中,全局组件是我们听的较多的一个概念，例如我们根据第三方UI框架封装了自己的表格，表单等，在使用时，我们可能很多地方需要用到该组件

全局组件的概念：

很多地方需要使用该组件时，可以全局注册该组件，使该组件为全局组件不需要在使用时再通过import引入的组件

例如在src下有components文件夹，里面放了我们的业务全局组件

我们在该文件夹下新建index.ts文件，然后注册全局组件

1.注册全局组件

import type { App } from 'vue'

const baseComponents = {
  baseAddHeader: () => import('@/components/baseAddHeader/index.vue'),
  baseContent: () => import('@/components/baseContent/index.vue'),
  baseDrawer: () => import('@/components/baseDrawer/index.vue'),
  baseHeader: () => import('@/components/baseHeader/index.vue'),
  baseMenu: () => import('@/components/baseMenu/index.vue'),
  baseModal: () => import('@/components/baseModal/index.vue'),
  baseSearch: () => import('@/components/baseSearch/index.vue'),
  baseTable: () => import('@/components/baseTable/index.vue'),
  baseTabs: () => import('@/components/baseTabs/index.vue'),
  baseUpdatePassword: () => import('@/components/baseUpdatePassword/index.vue'),
}

export default (app: App) => {
  for (const [componentName, component] of Object.entries(baseComponents)) {
    app.component(componentName, component)
  }
}

2.为全局组件添加类型声明

我们在该文件夹下新建component.d.ts文件，然后为组件添加类型声明

import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    baseAddHeader: (typeof import('./baseAddHeader/index.vue'))['default']
    baseContent: (typeof import('./baseContent/index.vue'))['default']
    baseDrawer: (typeof import('./baseDrawer/index.vue'))['default']
    baseHeader: (typeof import('./baseHeader/index.vue'))['default']
    baseMenu: (typeof import('./baseMenu/index.vue'))['default']
    baseModal: (typeof import('./baseModal/index.vue'))['default']
    baseSearch: (typeof import('./baseSearch/index.vue'))['default']
    baseTable: (typeof import('./baseTable/index.vue'))['default']
    baseTabs: (typeof import('./baseTabs/index.vue'))['default']
    baseUpdatePassword: (typeof import('./baseUpdatePassword/index.vue'))['default']
  }
}