vue + ts中的shims-vue.d.ts文件的作用，在ts中引入vue-echarts等vue文件

最新推荐文章于 2025-06-26 10:34:02 发布

小小前端--可笑可笑

最新推荐文章于 2025-06-26 10:34:02 发布

阅读量2.5w

点赞数 18

CC 4.0 BY-SA版权

文章标签： vue js

本文链接：https://blog.csdn.net/qq_41860203/article/details/110912759

本文介绍了shims-vue.d.ts文件在Vue项目中的作用，它是为了解决TypeScript不识别.vue文件的问题。通过声明模块，使TS能够理解Vue组件。如果删除该文件，会导致所有导入的Vue文件报错。同时，文章还展示了如何引入vue-echarts并配置相关库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
加这一段是是告诉 ts，vue 文件是这种类型的。
这一段删除，会发现 import 的所有 vue 类型的文件都会报错。

/**
 * shims-vue.d.ts的作用
 * 为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
 * 加这一段是是告诉 ts，vue 文件是这种类型的。
 * 可以把这一段删除，会发现 import 的所有 vue 类型的文件都会报错。
 */

declare module '*.vue' { //declare声明宣告， 声明一个ambient module(即:没有内部实现的 module声明) 
  import Vue from 'vue'
  export default Vue
}

declare module 'vue-echarts'  // 引入vue-echarts

<script lang="ts">
    /* eslint-disable @typescript-eslint/camelcase */
    import { Vue, Component, Watch } from 'vue-property-decorator'
    import ECharts from 'vue-echarts' //报错,按上面的方法在shims-vue.d.ts文件中引入即可
    import 'echarts/lib/chart/line'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/component/tooltip'
</script>