vue3+ts 引入组件有红色下划线问题的修复

1,954 阅读1分钟

问题描述:vue通过setup 语法糖引入组件时,会出现红色下划线,虽然不影响使用,但是当引入的组件数量较多时,就会出现大面积的红色下划线,如图:

image.png

image.png

解决问题: 首先在项目的 src 目录下新建一个文件 ‘xxx.d.ts’,文件名自定义就好(也可以在项目根目录下新建,但是要记得在tsconfig.json中将其include) 文件内容如下:

// 解决引入vue组件 红色下划线的问题
declare module "*.vue" {
import { ComponentOptions } from "vue";
const ComponentOptions: ComponentOptions;
export default ComponentOptions;
}

之后就会发现在 .ts的文件中引入 .vue 的组件的下划线已经没有了

image.png 但是此时进到 .vue文件中会发现引入组件时下划线依然存在??

image.png 原因是 Vetur 插件的语法检测不太适用了,对vue3比较推荐使用的插件为:Volar,将 Vetur 插件禁用掉就可以解决下划线问题

image.png