一旦我们全局注册了组件,我们就可以在任何地方使用这个组件, 这有一个弊端,如果我们使用了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
提到最上层。