03vue3实战-----关于类型声明的一个小坑

1.一个问题

在vscode中先禁用vue-official

重启vscode工具，进入main.ts文件，发现引入App.vue文件时候会报错。

2.原因

鼠标悬浮在爆红处，会提示找不到模块“./App.vue”或其相应的类型声明。
我们进入env.d.ts文件:

按ctrl+鼠标左键进入vite/client的源代码中:

发现会有一堆模块声明。但找不到vue的模块声明，这就是为啥用es6语法导入App.vue文件时候，会报错。(启用了vue-official不会报错可能是因为里面有某些配置)。

3.解决方法

解决方法肯定是对vue文件进行模块声明。类似下面这样子:

declare module '*.vue' {
  const src: string
  export default src
}

但vue文件肯定不是string类型，现在要找出vue文件的类型就可以解决问题。

declare module '*.vue' {
   import { DefineComponent } from 'vue'
   const component: DefineComponent
   export default component
}

就会发现main.ts中引入vue文件不再报错。

之后可能还是直接启用vue-official插件,里面有一些很好的功能。本章目的主要是记录怎么样去声明模块。