Vue3.2 + Vite2.6 + TS 中注册的全局组件添加代码提示

Vue3.2 + Vite2.6 + TS 中注册的全局组件添加代码提示

1. 问题说明

1. 注册的全局组件直接引用会发现没有之前的代码提示和高亮效果
2. 全局组件SvgIcon中的icon-name参数是必填的
   
3. 但是直接引用不会标红提示
4. 如果是局部引用了该组件,就会出现代码标红提示
   

2. 处理方法volar的说明文档地址

在main.ts同级中,添加一个components.d.ts文件即可

import SvgIcon from '@/components/SvgIcon/index.vue'
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    SvgIcon: typeof SvgIcon
  }
}