修复TypeScript中导入vue文件报错显红

修复TypeScript中导入vue文件报错显红

vue 2 的解决办法，针对 vue 文件导入报错

创建一个 shims.d.ts 文件，放置到 src/globalDeclare 中

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

vue 3.0 的解决办法，针对 vue 文件导入报错

vue3.0 中使用上述办法，会使 createApp 与 vue 类型不符合

导致 Vue 类型与 PublicAPIComponent 不符合

因此 vue3 中的声明方法使用以下办法：

declare module '*.vue' {
  import { defineComponent } from 'vue';

  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

注意，该模块声明需要单独创建文件声明

在 tsconfig.json 中添加

{
    "compilerOptions"： {
        "typeRoots"： [
            "src/globalDeclare"
        ]
    }
}