在 TypeScript 文件中导入 Vue 组件 [英] Importing Vue components in TypeScript file

问题描述

我一直在尝试将 Vue.js 与 TypeScript 一起使用，但我遇到了

解决方案

来自 亚历克斯·乔弗:

如果您的编辑器对 main.js 文件中的 import App from './App' 行大喊大叫关于找不到 App 模块，您可以添加一个 vue-shim.d.ts 文件到您的项目，内容如下:

声明模块*.vue"；{从'vue'导入Vue导出默认 Vue}

并写:

从'./App.vue'导入应用程序

代替

从'./App'导入应用程序

I have been trying to use Vue.js with TypeScript and I came across this repo.

I faced issues here that I am getting error while importing Vue Single Component File from TypeScript. I am using Visual Studio Code. Please see error below.

main.ts:

// The Vue build version to load with the 'import' command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import * as Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

VS Code error:

1 ERROR 
• main.ts
[ts] Cannot find module './App'. (4 17) 

解决方案

From Alex Jover:

If your editor is yelling at the line import App from './App' in main.js file about not finding the App module, you can add a vue-shim.d.ts file to your project with the following content:

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

and write :

import App from './App.vue'

instead of

import App from './App'

这篇关于在 TypeScript 文件中导入 Vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！