TypeScriptファイルでVueコンポーネントをインポートする

Question

Vue.jsをTypeScriptで使用しようとしていて、this repoに出くわしました。

Vue単一コンポーネントファイルをTypeScriptからインポートする際にエラーが発生することがありました。私はVisual Studioコードを使用しています。下記のエラーをご覧ください。

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

チェックアウトvue-class-component。基本的にはappendTsSuffixTo: [/\.vue$/]をts-loaderのオプションに、esModule: trueをvue-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 
    } 
    } 
]}} 

私は他のものを見逃している可能性があります。

Answer 2

VUE-CLIを使用する場合は、次のように、VUE-ローダーconf.jsを適応させる：

var utils = require('./utils') 
var config = require('../config') 
var isProduction = process.env.NODE_ENV === 'production' 

module.exports = { 
    loaders: utils.cssLoaders({ 

    sourceMap: isProduction 
     ? config.build.productionSourceMap 
     : config.dev.cssSourceMap, 
    extract: isProduction, esModule: true 
    }), esModule: true 
} 

Answer 3

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

から、あなたのエディタは「から行のインポートアプリケーションで叫んされている場合は./

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

01：アプリケーションモジュールを見つけることない程度main.jsファイル内のApp」、あなたは以下の内容で、プロジェクトへの VUE-shim.d.tsファイルを追加することができます

と書き込み：代わりに

import App from './App' 

Answer 4

の

import App from './App.vue'

をFYI、あなたが生成することができます。 tsconfigでdeclaration generateをオンにして、コンポーネントのd.tsファイルを作成します。 json、ソースディレクトリにコピーして、あなたが持っているものを参照してください！