vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决

在Vue项目中使用TypeScript，当我们通过import导入.vue文件时，TS可能会抱怨找不到模块。这是因为TypeScript没有为.vue文件定义类型声明。为了解决这个问题，需要安装"vue-class-component"和"vue-property-decorator"两个库，并对tsconfig.json文件进行一些配置。

以下是具体步骤：

1. 安装所需的库

打开终端，切换到你的项目根目录，输入以下命令：

npm install vue-class-component vue-property-decorator --save-dev

1. 配置tsconfig.json

在tsconfig.json文件中，添加以下配置：

{
  "compilerOptions": {
    ...
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    ...
  },
  "include": [
    ...
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    ...
  ],
  "extends": "vue/tsconfig.json"
}

1. 编写Vue组件

为了使用Vue组件，需要在组件上使用"vue-class-component"和"vue-property-decorator"中的装饰器。示例代码如下：

<template>
  <div>{{ msg }}</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  // Prop
  msg!: string;
}
</script>

在上述示例中，通过import方式引入vue的Component，同时使用装饰器把组件作为子类继承于Vue类。

1. 编写TypeScript文件

在TypeScript文件中，下面是如何使用已经引入的.vue文件。

import Vue from 'vue';
import ComponentName from './components/ComponentName.vue';

Vue.component('component-name', ComponentName);

在上述示例中，我们使用import导入.vue文件，然后在Vue中进行注册。

在以上步骤完成后，你就可以在Vue项目中愉快地使用TypeScript啦！

PS：如果在以上步骤中还遇到了问题，请注意：

1. 确认你的Vue版本是否为2.x；
2. 确认你的tsconfig.json文件中的配置是否正确；
3. 如果使用了.vue文件中的scoped属性，请确保你的样式引用正确。