Vue全局组件类型提示

编辑
Vue

一旦我们全局注册了组件，我们就可以在任何地方使用这个组件, 这有一个弊端，如果我们使用了TypeScript的话就丢失了全局组件的类型提示。 对于这个问题，Vue 3 有一个 PRhttps://github.com/vuejs/core/pull/3399 扩展了全局组件的接口。Volar 已经支持这种用法， 我们可以通过在根目录添加components.d.ts文件的方式来添加全对局组件的TypeScript的支持。

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/es')['ElButton']
    ElLink: typeof import('element-plus/es')['ElLink']
  }
}

对于这个文件我们可以使用unplugin-vue-components插件来自动生成。

使用pnpm命令创建的vite项目无法在vscode中获得组件类型提示

解决办法参考https://github.com/antfu/unplugin-vue-components/issues/406

添加.npmrc文件并添加以下内容

public-hoist-pattern[]=@vue/runtime-core

或者

node-linker=hoisted

这两种方法原理都是一样的，即将@vue/runtime-core提到最上层。