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

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

引用

CSDN

1.

https://m.blog.csdn.net/weixin_44368048/article/details/139091571

在Vue3项目中使用TypeScript开发时，如何声明全局组件并获取代码提示是一个常见的需求。本文将详细介绍如何在Vue3项目中注册全局组件，并通过TypeScript为这些组件添加类型声明，从而在开发过程中获得更好的代码提示和类型检查。

全局组件的概念

在Vue开发中，全局组件是一个常用的概念。例如，我们根据第三方UI框架封装了自己的表格、表单等组件。当这些组件在很多地方都需要使用时，可以将其注册为全局组件，这样在使用时就无需再通过import引入。

假设我们在src目录下有一个components文件夹，里面存放了我们的业务全局组件：

1. 注册全局组件

首先，在components文件夹下新建一个index.ts文件，用于注册全局组件：

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. 为全局组件添加类型声明

为了在TypeScript中获得更好的代码提示，我们需要为全局组件添加类型声明。在components文件夹下新建一个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']
  }
}

通过以上步骤，我们就可以在Vue3项目中成功注册全局组件，并在TypeScript中获得代码提示。这种方法不仅提高了开发效率，还增强了代码的可维护性。