在TypeScript文件中导入Vue组件

Question

我一直在尝试使用TypeScript的Vue.js,我遇到了这个回购.

我在这里遇到的问题是从TypeScript导入Vue单组件文件时出错.我正在使用Visual Studio Code.请看下面的错误.

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代码错误:

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

Answer 1

来自https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/

如果您的编辑器在main.js文件中的'./App'中关于未找到App模块的行导入应用程序大吼大叫,您可以使用以下内容将vue-shim.d.ts文件添加到项目中:

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

和写 :

import App from './App.vue'

代替

import App from './App'

Answer 2

查看vue-class-component。基本上，您必须添加appendTsSuffixTo: [/\.vue$/]tots-loader的选项和esModule: truetovue-loader的选项。

// webpack.config.js

{ modules: { rules: [
  {
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      esModule: true
    }
  }
]}}

我可能错过了其他东西。