TypeScript 文件中引入 xxx.vue 模块报错问题解

出现原因

TypeScript 文件只能理解 .ts 文件，无法理解 .vue 文件

解决方法

在 TypeScript 文件同一路径下创建一个 shim-vue.d.ts 文件，内容如下：

declare module '*.vue' {
    import { ComponentOptions } from "vue";
    const componentOptions: ComponentOptions
    export default componentOptions
}

这样解决了 TypeScript 文件报错的问题，但是同样还有一个小问题，就是必须在工作台同时打开刚才创建的 .d.ts 文件，否则还是会报错；

不想总是打开 shims-vue.d.ts 来解决 TS 报错?

那么你可以在项目跟目录下创建一个 tsconfig.json 文件，文件内容为：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

就不用再打开 shims-vue.d.ts 文件了。