关于Vue3+Typescript import vue 文件报红问题

这个问题目前已经有很多文章提出了正确的解决方案,即增加 shims-vue.d.ts 文件来解决

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

但是其实在VueCli创建的项目中其实是默认带 上这个文件及代码的,但是仍然会报红,

其实是因为虽然带了,但是 tsconfig.json 内并没有成功配置上这个文件

默认的配置只匹配了src下一级及以后的目录内的文件(猜测,实际待解答),而 shims-vue.d.ts 文件在src目录下导致无法匹配,所以在第一行加上ts文件检测就可以了

OK,解决报红问题,其他报红但是不影响运行的问题基本基本都是靠配置 .d.ts 文件来解决的

本人 菜鸡,问题解答有误请指正。谢谢!!!

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 fully supports TypeScript out of the box, making it a great choice for TypeScript developers. You can use TypeScript to write your Vue components, and Vue will provide automatic type inference and checking for your code. To start using Vue 3 with TypeScript, you'll need to configure your project to support TypeScript. Here are the steps: 1. Create a new Vue project using the Vue CLI: ``` vue create my-project ``` 2. Choose the default preset or manually select features that you need. 3. Select "TypeScript" as the preferred language when prompted. Once the project is created, you can start writing Vue components using TypeScript. Here's an example of a simple Vue component written in TypeScript: ```typescript // HelloWorld.vue <template> <div> <h1>{{ message }}</h1> <button @click="increment">Increment</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'HelloWorld', setup() { const message = ref('Hello, Vue 3!'); const increment = () => { message.value += '!'; }; return { message, increment, }; }, }); </script> ``` In this example, we import `defineComponent` and `ref` from the Vue package, which are TypeScript helpers. The `setup` function is used to define the component's data and methods. With TypeScript, you get type checking for your component props, data, computed properties, and methods. This helps catch potential errors and provides better IDE support. Overall, using Vue 3 with TypeScript can enhance your development experience by providing strong typing and better code organization.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值